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>

score 29 · Accepted Answer · answered Aug 28 '12 at 06:19

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/

Thank you for the reply. I use external url to check this problem is js fiddle. I want to load my internal asp.net mvc view to load inside model. This doesn't work for me. For the example purposes i use helloworld.html http://jsfiddle.net/kV8hB/3/ Thank you, Naveen — Naveen, Aug 28 '12 at 06:51
If you want to load your internal ASP.NET MVC view then you don't need an iframe. Just make sure that the url is correct. For example what happens if you put the url that is in the `href` directly in your browser address bar? Is it working? — Darin Dimitrov, Aug 28 '12 at 06:52

score 2 · Answer 2 · edited Aug 30 '12 at 13:34

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>

score 0 · Answer 3 · answered Apr 04 '14 at 11:13

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>

Twitter bootstrap modal external urls are not working

3 Answers3

Linked