Bootstrap's Remote Modal Dialog Not Working

Question

I'm having problems using remote modal dialogs from the Twitter Bootstrap api.

I am trying to load a modal dialog with the contents from a remote html page. I have two pages, one containing the button (modal-remote.html) and one containing the content I wish to display when the button is clicked (modal-target.html).

modal-remote.html:

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

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

</html>

Here is my code for the target (or remote) page

modal-target.html:

<html>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

    <div class="modal" 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">
        <p>The quick brown fox jumps over the lazy dog. </p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

They are in the same directory. When I click on the button, nothing happens. Anybody know what I'm doing wrong? Non-remote modal dialogs work just fine, I just can't figure out how to use the remote feature.

score 12 · Accepted Answer · answered Oct 20 '12 at 09:17

You should read carefully the modal documentation.

If a remote url is provided, content will be loaded via jQuery's load method and injected into the .modal-body

Your files should be more like that :

modal-remote.html:

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

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

<div class="modal hide" 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">
        <!-- content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

modal-target.html:

<p>The quick brown fox jumps over the lazy dog. </p>

Note now with bootstrap3, the content will be injected into **the root of the modal element**. See http://stackoverflow.com/a/18387625/553073 and [document](http://getbootstrap.com/javascript/#modals) — lastr2d2, Jan 06 '14 at 05:43

score 1 · Answer 2 · edited Jan 06 '15 at 08:00

1

Starting from Bootstrap v3.30, remote option is deprecated. See Here.

So the recommended way to use remote content is to use the jquery.load() method.

Example:

$("modal").load("remote_content.html");

edited Jan 06 '15 at 08:00

zessx

68,042
28
135
158

answered Jan 06 '15 at 07:41

Chvoirre00

11
2

Bootstrap's Remote Modal Dialog Not Working

2 Answers2