我必须在模态窗口中加载页面(内部URL).我一直在使用window.showModalDialog(url,null,features),但这在Safari,Chrome上无法正常工作.所以我们决定使用Bootstrap的模态对话框.我无法完成这项工作.我有什么想法可能做错了吗？
//imports
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
//activate content as modal
$(document).ready(function(){
$('#test_modal').modal({
});
}
.......
.......
$("#btnSubmit").click(function(){
var url = constructrequestURL();
$('#test_modal').modal(data-remote=url,data-show="true");
});
-----
-----
<div class="modal fade" id="test_modal">
</div>
解决方法
如果您要继续沿着引导路径前进,可以看一下：
jsfiddle – remote URI in Bootstrap 2.3.2 modal
请注意,URL需要位于同一个域中(尽管您提到它是“内部”),或者远程站点的Access-Control-Allow-Origin设置需要允许您的域.所以请记住,小提琴演示实际上无法从example.com加载内容.
<button type="button" class="btn" data-toggle="modal" data-target="#myModal" data-remote="http://example.com">Launch modal</button>
<div id="myModal" class="modal hide fade">
<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">
<!-- remote content will be inserted here via jQuery load() -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
您不需要为此编写任何自定义JavaScript – Bootstrap将根据data-remote =“http://example.com/whatever”和data-target =“#myModal”等数据属性知道该做什么等等
有关详细信息,请参阅Bootstrap modal docs的相关部分…
编辑：事实证明,动态更改远程URL并不是那么容易.希望this answer能为您提供进一步的帮助.