CODEWITHSUNDEEP
jquerytwitter-bootstrap
no0ne
no0ne

Reputation: 2679

Multiple external modals problems - Bootstrap 3

I am using bootstrap3 to load multiple external modals. When I toggle between the different modals I get stuck with the content of the last modal. Another problem I encounter is that for some reason after loading the first modal the close buttons get deactivated 

<a href="#myModal" role="button" class="btn" data-toggle="modal" 
data-load-remote="contact/contact.html" data-isloaded="false"
data-remote-target="#myModal">CONTACT</a>

<a href="#myModal" role="button" class="btn" data-toggle="modal" 
data-load-remote="faq/faq.html" data-isloaded="false"
data-remote-target="#myModal">FAQ</a>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->


$(function() {
$('[data-load-remote]').on('click',function(e) {
    e.preventDefault();
    var $this = $(this);
    var remote = $this.data('load-remote');
    if (!$this.data('isloaded')) {
        if(remote) {
            $($this.data('remote-target')).load(remote);
            $this.data('isloaded', true)
        }
    }
});
});

I've tried using different id tags and that works fine, but then I end up with loads of modal divs. Is there any way to use the same div for multiple modals? Anyone?

Here is a FIDDLE that doesn't load the modal at all :(

Cheers

Upvotes: 0

Views: 212

Answers (1)

captainrad
captainrad

Reputation: 3830

A proper modal should include a modal-header, modal-title, modal-body and a modal-footer with accompanying elements for close buttons.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" arialabelledby="Label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header"> <!-- bootstrap class for header in modal -->
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <!-- bootstrap close button in modal header -->
        <h4 class="modal-title"></h4> <!-- bootstrap class modal title -->
      </div>
      <div class="modal-body"> <!-- bootstrap class for modal content -->

      </div>
      <div class="modal-footer"> <!-- bootstrap class for footer and close button in modal -->
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="cleanupTheModal()">Close</button>
      </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Here is an updated fiddle. While not using the method you have described, this provides an additional option for loading different content for 'different' modals.

http://jsfiddle.net/wGkLT/2/

Upvotes: 2

Related Questions