How to open external URL in modal bootstrap?

Asked

Viewed 4,581 times

3

I already use the modal bootstrap and it worked very well for the content I tested. But I can’t find anything that explains how to open an external page in a modal on the site. Does anyone know how to do it? I’m grateful for your help!

bootstrap-3 url modal

1 answer

2

<a data-toggle="modal" class="btn" href="http://www.bing.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>

Javascript:

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

in case you have to use an iframe see working on jsfidle: http://jsfiddle.net/C3LkL/84/

Browser other questions tagged bootstrap-3 url modal

You are not signed in. Login or sign up in order to post.