Open remote content in the Bootstrap modal window

Question

All I need is a simple example in how to open a remote content into a Twitter Bootstrap modal window.

I'm using Bootstrap v2.0.4 and I just can't get it to work. I can open regular modal windows, but I can't make it open a remote file inside it.

Answer 1

First, remote data must fulfill the same origin policy. If you're not satisfying that, everything after this is going to fail (if you are trying to load external URL's, see Twitter Bootstrap external URL's are not working).

There are two ways to accomplish loading remote content into a modal with the Bootstrap data-api. Namely to either specify the remote url to load in the <a> element which triggers the modal or to specify the url in the modal's markup.

In the former, one uses the href property:

<a data-target="#myModal" href="/remote/url" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

In the latter, one uses the data-remote property:

<div class="modal fade hide" id="myModal" data-remote="/remote/url">...</div> 

The advantage of specifying it in the <a> element is that one could have a different remote url for each <a>, yet still only use a single modal. Using the data-remote property might be more advantageous in situations where you have multiple means of launching a modal with the same content. Then, no matter what launches it (even a JS call), it would consistently provide the same remote content, without having to duplicate that information across all the methods of invocation.

Here is a demo using the latter method:

JSFiddle

The content in the body of the modal is the remote html.