twitter-bootstrap 使用引导程序 3.0 模式在 iframe 中加载动态的远程内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20026132/
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
Using bootstrap 3.0 modals to load dynamic, remote content within an iframe
提问by BandfuzzAlex
I have tried several of the suggestions posted here on other questions and on stackexchange, and nothing is working to my satisfaction.
我已经尝试了这里发布的一些关于其他问题和 stackexchange 的建议，但没有任何效果令我满意。
I am trying to load dynamic content into a modal. Specifically, YouTube videos or Soundcloud audio within an iFrame. So that any user who visits the site, can enter links for videos or audio. The modal then dynamically loads that users links. Each subsequent user can see each others links, all within a modal. (separate modal loads up for each user)
我正在尝试将动态内容加载到模态中。具体来说，iFrame 中的 YouTube 视频或 Soundcloud 音频。这样任何访问该站点的用户都可以输入视频或音频的链接。模态然后动态加载用户链接。每个后续用户都可以看到彼此的链接，所有这些都在一个模态中。（为每个用户单独加载模式）
I can't get this to work quite right. I have created a separate html file called "modal.html" to test this out, which includes an iframe with the proper YouTube/Soundcloud clip.
我无法让它正常工作。我创建了一个名为“modal.html”的单独 html 文件来测试这个，其中包括一个带有正确 YouTube/Soundcloud 剪辑的 iframe。
I've also tried including an iframe, within class modal-body, as suggested by one user, and then have that iFrame load a second html page (modal.html) which in turn also has an iframe to load a youtube player or soundcloud player. But an iframe loading a page with another iframe seems inelegant and caused other html/css problems I had to address.
我还尝试按照一位用户的建议在 modal-body 类中包含一个 iframe，然后让该 iFrame 加载第二个 html 页面 (modal.html)，该页面又具有一个 iframe 来加载 youtube 播放器或 soundcloud球员。但是用另一个 iframe 加载页面的 iframe 似乎不够优雅，并导致了我必须解决的其他 html/css 问题。
I am also confused about whether i need to use "data-remote=" inside my tag, or does the href suffice? Or do I use the data-remote inside the first of the modal. Or Both, or either? Neither has worked.
我也很困惑我是否需要在标签中使用“data-remote=”，或者 href 是否足够？或者我在模态的第一个中使用数据远程。还是两者兼而有之？两者都没有奏效。
Here's my code:
这是我的代码：
<a data-toggle="modal" href="modal.html" data-target="#myModal">Click me</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" data-remote="modal.html" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
回答by Neil Girardi
What is the exact nature of the problem you are experiencing?
您遇到的问题的确切性质是什么？
I would probably use the jQuery .load() method to insert the content from modal.html into the modal and then open the modal. So something like this:
我可能会使用 jQuery .load() 方法将 modal.html 中的内容插入到模态中，然后打开模态。所以像这样：
$(function() {
// intiliaze the modal but don't show it yet
$("#myModal").modal('hide');
$('a[data-target="#myModal"]').click(function(event) {
event.preventDefault();
var myModal = $('#myModal').
modalBody = myModal.find('.modal-body');
// load content into modal
modalBody.load('/modal.html');
// display modal
myModal.modal('show');
});
});
UPDATE IN RESPONSE TO OP'S QUESTION: Another way to do it would be to simply put an iframe inside .modal-body and set the source of the iframe to "/modal.html".
更新响应 OP 的问题：另一种方法是简单地将 iframe 放入 .modal-body 并将 iframe 的源设置为“/modal.html”。
