Menu
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.
615
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>
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
