gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 12:24:37 26 4
gpt4 key购买 nike

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

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

最佳答案

来自 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 中,可以毫无问题地打开和关闭模式。

关于javascript - 加载 iframe 作为内容时无法关闭 bootstrap3 模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24272283/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com