javascript - 加载 iframe 作为内容时无法关闭 bootstrap3 模式

Question

我正在使用 bootstrap 3 模式。

以下是我的代码。

<div id="myModal" class="modal hide fade" 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">&times;</button>
      <h3>Modal header</h3>
    </div>
<div class="modal-body">
    <iframe src="remote.html"></iframe>
</div>
<div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>

现在一切都正常工作，除了触发模式时我无法隐藏模式(即使使用关闭按钮)。

但是，当我在没有 iframe 的情况下使用模态时，模态功能完美。

这已经占用了我一段时间，如果有人能帮助我解决这个问题，那就太好了。

Answer 1

来自 KayakDave 的回答:https://stackoverflow.com/a/20818030/2576805

2) 添加一些在单击模式对话框按钮时触发的 jquery。以下代码需要 data-src 属性中的链接目标，并且按钮具有 modalButton 类。您还可以选择指定数据宽度和数据高度，否则它们分别默认为 400 和 300(当然您可以轻松更改它们)。

然后在 iframe 上设置属性，这会导致 iframe 加载指定的页面。

$('a.modalButton').on('click', function(e) {
var src = $(this).attr('data-src');
var height = $(this).attr('data-height') || 300;
var width = $(this).attr('data-width') || 400;

$("#myModal iframe").attr({'src':src,
                           'height': height,
                           'width': width});
});

3) 将类和属性添加到模式对话框的 anchor 标记:

<a class="modalButton" data-toggle="modal" data-src="http://www.youtube.com/embed/Oc8sWN_jNF4?rel=0&wmode=transparent&fs=0" data-height=320 data-width=450 data-target="#myModal">Click me</a>

<小时/>

在答案底部提供的 jsFiddle 中，可以毫无问题地打开和关闭模式。