将 iframe 作为内容加载时无法关闭 bootstrap3 模式答案

【问题标题】：Unable to close bootstrap3 modal when loading iframe as content将 iframe 作为内容加载时无法关闭 bootstrap3 模式
【发布时间】：2014-06-17 19:57:39
【问题描述】：

我正在使用 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 的模态时，模态功能完美。

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

【问题讨论】：

标签： javascript twitter-bootstrap iframe bootstrap-modal

【解决方案1】：

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

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

然后设置属性，使 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) 将类和属性添加到模态对话框的锚标记：

<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中，模态可以毫无问题地打开和关闭。

【讨论】：