Twitter bootstrap modal external urls are not working

Question

Twitter bootstrap modal doesn't load external urls inside modal.

Sample Code : jsFiddle

<a data-toggle="modal" class="btn" href="http://stackoverflow.com" data-target="#myModal">click me</a>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
  </div>
</div>

Answer 1

This doesn't work because you are violating the same origin policy restriction that prevents you from sending cross domain AJAX requests which is what bootstrap is using here. So one possibility is to load the external content into an <iframe>:

$('a.btn').on('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    $('.modal-body').html('<iframe width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency="true" src="' + url + '"></iframe>');
});​

Be warned though that some sites (such as google, stackoverflow, facebook, ...) cannot be loaded into an iframe. They are setting the X-Frame-Options response HTTP header to SAMEORIGIN and also check if they are loaded inside an iframe.

You can see it in action in this fiddle: http://jsfiddle.net/f2Fcd/

Answer 2

Try this:

<script type="text/javascript" charset="utf-8">
$(function() {
 $('*[data-modal]').click(function(e) {
 e.preventDefault();
 var href = $(e.target).attr('href');
  if (href.indexOf('#') == 0) {
   $(href).modal('show');
  } else {
    $.get(href, function(data) {
    $('<div class="modal">' + data + '</div>').modal('show').appendTo('body');
                        });
                    }
                });
            });
        </script>

Answer 3

This snippet helps in fetching the modal content via Ajax:

$.get(href, function(response) {
     $("#myModal .modal-content").html(response);
});

Keep in mind, that the HTML response fetched, must containg the dom-elements normally present inside the "modal-content" element:

 <div class="modal-header">HEADER</div>
 <div class="modal-body">BODY</div>
 <div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     <button type="button" class="btn btn-primary">Do It</button>
 </div>