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加载指定的页面。

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

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

1 个答案: