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

I dropped a working example here on JSFiddle that illustrates how to use a link to open a bootstrap modal containing a remote URL (of the same origin). It's an almost verbatim copy-paste from twitter's bootstrap docs with some minor modifications to make it work for remote URLS.

It just comes down to pointing the href attribute to the URL you want to open and the data-target attribute at the DIV that acts as the modal window.

JSFIddle here

Same code here:

<!-- Button to trigger modal -->
<a href="/matt_hwy1/uEQEP/4/show/" data-target="#myModal" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" 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 Test Header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>​

Answer 2

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.