我使用Twitter Bootstrap api中的远程模态对话框遇到问题.
我正在尝试加载一个来自远程html页面的内容的模态对话框.我有两个页面,一个包含按钮(modal-remote.html),另一个包含点击按钮时要显示的内容(modal-target.html).
莫代尔,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>
莫代尔,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>
他们在同一个目录.当我点击按钮时,没有任何反应.有谁知道我在做错什么?非远程模式对话框工作正常,我不知道如何使用远程功能.
解决方法
你应该仔细阅读
modal documentation.
If a remote url is provided,content will be loaded via jQuery’s load method and injected into the .modal-body
你的文件应该更像:
莫代尔,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>莫代尔,target.html上:
<p>The quick brown fox jumps over the lazy dog. </p>