jQuery 如何在 Bootstrap Modal 对话框中显示 URL：单击按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18220462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show a URL in Bootstrap Modal dialog: On button click
提问by agentx
I have to load a page (internal URL) in a modal window. I had been using window.showModalDialog(url, null, features) but this does not work properly on Safari,Chrome. So we decided to use Bootstrap's modal dialog instead. I'm unable to make this work. Any ideas what I could be doing wrong?
我必须在模式窗口中加载页面（内部 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>
回答by codebyren
If you're going to continue down the bootstrap path, you could take a look here: jsfiddle - remote URI in Bootstrap 2.3.2 modal
如果您要继续沿着引导程序路径前进，您可以在这里查看：jsfiddle - Bootstrap 2.3.2 modal 中的远程 URI
Note that the URL will need to be on the same domain (though you mentioned it is "internal") or your domain will need to be allowed by the remote site's Access-Control-Allow-Origin settings. So keep in mind that the fiddle demo can't actually load content from example.com.
请注意，该 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>
You don't need to write any custom JavaScript for this - Bootstrap will know what to do based on the data-attributes like data-remote="http://example.com/whatever" and data-target="#myModal" etc.
您不需要为此编写任何自定义 JavaScript - Bootstrap 将根据 data-remote="http://example.com/whatever" 和 data-target="#myModal" 等数据属性知道要做什么等等。
See the relevant section of the Bootstrap modal docsfor more info...
有关更多信息，请参阅Bootstrap 模态文档的相关部分...
Edit:It turns out that changing the remote URL dynamically isn't as easy as it could be. Hopefully this answerwill help you further.
编辑：事实证明，动态更改远程 URL 并不容易。希望这个答案能进一步帮助你。
回答by Ram Pratap
Alternatively you could use fancy box. Its simple and clean.
或者你可以使用花哨的盒子。它简单而干净。
Take a look here: http://fancyapps.com/fancybox/3/docs/#ajax
看看这里：http: //fancyapps.com/fancybox/3/docs/#ajax
<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:;">
AJAX content
