Bla*_*ake 10 twitter-bootstrap
我在Twitter Bootstrap api中使用远程模态对话框时遇到问题.
我正在尝试使用远程html页面中的内容加载模式对话框.我有两个页面,一个包含按钮(modal-remote.html),另一个包含我希望在单击按钮时显示的内容(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>
这是我的目标(或远程)页面的代码
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>
它们位于同一目录中.当我点击按钮时,没有任何反应.谁知道我做错了什么？非远程模态对话框工作正常,我只是无法弄清楚如何使用远程功能.
She*_*row 12
您应该仔细阅读模态文档.
如果提供了远程URL,则将通过jQuery的加载方法加载内容并将其注入.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>
| 归档时间： |
|
| 查看次数： |
17070 次 |
| 最近记录： |