Bootstrap 3.1.1 Modal Remote Loading Fix - Simulate BS2 & 3 Modal Behaviour

Bootstap 3.1.1 Modal Fix

As of Bootstrap 3.1.1 modal behaviour has changed.  When you load remote content into the modal, the revised behaviour sees the content loaded into the modal's root.  This destroys the modal's internal layout, meaning that the remote content will need to be modified to mimic the layout.  For many user's that will be impractical.

To reinstate the old behaviour we're going to hijack Bootstrap 3.1.1's modal behaviour a hair.  This will be done using Bootstrap 3's documented modal mark up, so the behaviour should be seemless.

I'm going to keep the code variable heavy and descriptive so those new to Javascript can follow along.  One of the bonuses of Bootstrap is that it democratizes mobile first and responsive development to new coders.  I'm also assuming the presence of JQuery.  Javascript heavy lifter types will handily streamline the code.

For reference here's a link that invokes a BS3 modal:
<li><a data-toggle="modal" href="terms.html" data-target="#terms">Terms of Use</a></li>

In youre Javascript you're going to need the following.

// Make sure the DOM elements are loaded and accounted for
$(document).ready(function() {

  // Match to Bootstraps data-toggle for the modal
  // and attach an onclick event handler
  $('a[data-toggle="modal"]').on('click', function(e) {

    // From the clicked element, get the data-target arrtibute
    // which BS3 uses to determine the target modal
    var target_modal = $(e.currentTarget).data('target');
    // also get the remote content's URL
    var remote_content = e.currentTarget.href;
    
    // Find the target modal in the DOM
    var modal = $(target_modal);
    // Find the modal's <div class="modal-body"> so we can populate it
    var modalBody = $(target_modal + ' .modal-body');

    // Capture BS3's show.bs.modal which is fires
    // immediately when, you guessed it, the show instance method
    // for the modal is called
    modal.on('show.bs.modal', function () {
            // use your remote content URL to load the modal body
            modalBody.load(remote_content);
        }).modal();
        // and show the modal

    // Now return a false (negating the link action) to prevent Bootstrap's JS 3.1.1
    // from throwing a 'preventDefault' error due to us overriding the anchor usage.
    return false;
    });
    
  }); // close off document ready
  
  We're just about there.  One thing you may want to do is style the modal body with a
  max-height, so that long content will scroll.
  
  In your CSS, you'll need the following:
  
.modal-body{
    max-height: 300px;
    overflow-y: scroll;
}

Just for refference I'll include the modal's HTML, which is a knock-off of every Bootsrap Modal Example you've ever seen:
<div id="terms" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3 id="termsLabel" class="modal-title">TERMS AND CONDITIONS</h3>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Cheers,
Neil

Great code, exactly what I'm looking for. I have one issue with it though. It works the first time, but when I click the button again to load the modal, it calls the remote twice. When I click it a third time, it calls the remote three times, and on and on.

Here is my code:

<a href="get_nmfc_codes.php?id='.$ord_no.'&amp;type=order" data-toggle="modal" data-target="#nmfc_codes" class="btn btn-info" style="margin-left: 10px;">NMFC Codes</a>

<div class="modal" id="nmfc_codes" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Carrier Information <a href="print_nmfc_codes.php?type=order&amp;id=<?php echo $ord_no; ?>" target="_blank" class="btn btn-info pull-right">print</a></h4>
            </div>
            <div class="modal-body">
                <p>loading...</p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

$('a[data-toggle="modal"]').on('click', function(e) {
    var target_modal = $(e.currentTarget).data('target');
    var remote_content = e.currentTarget.href;
    var modal = $(target_modal);
    var modalBody = $(target_modal + ' .modal-body');
    modalBody.html('<p>loading...</p>');
    modal.on('show.bs.modal', function () {
        modalBody.load(remote_content);
    }).modal();
    console.log(1);
    return false;
});

I'm using 3.3.4 so I'm not sure if something changed. Any ideas?

Thanks!