Remote Content with Links in Bootstrap Modal

Question

I have a bunch of Bootstrap modal windows on a site I'm working on that are loading remote content. This is working perfectly. However, my boss has informed me that the links within those modals cannot go to a new page, they must reload in the modal window.

I have tried a few things with no luck.

First, I have the modal link inside the modal

<a data-toggle='modal' class='modalBox' data-target='#largeModal'
href='link here'>Link</a>

This link does not work, Bootstrap.js throws this error..

TypeError: 'undefined' is not a function (evaluating 'b.preventDefault()')

So I tried changing the Id to a different modal window I have on the page and it does pop up behind the modal window that is already there. Which is not exactly what I need, but is promising.

Is there a way around this so the content can load in the same modal window?

Answer 1

As @Chevi suggested, the best option will be to place an iframe inside the modal. There is no need to change your existing page/modal layout as you can insert a new iframe on each klick.

Given you have a bootstrap modal with a link inside the .modal-body you will need something like this:

$('.modal').on("click", "a", function (e) {
    var target = $(this).attr('href');
    $('.modal-body').html('');
    $('<iframe>').attr('src', target).appendTo($('.modal-body'));
    e.preventDefault();
});  

This grabs the href of the clicked link, replaces the .modal-body content with an iframe and sets the iframe's src to the href of the link.

Be aware that the link target must be frameable: No framekillers, no X-Frame-Options (therefore linking to google this way will not work!)

Fiddle: http://jsfiddle.net/445eA/