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

我正在使用bootstrap 3模式。无法在加载iframe作为内容时关闭bootstrap3模式

以下是我的代码。

<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>

现在的每一件事就像它应该除了当模式被触发我无法隐藏模式（甚至关闭按钮）。

Howwever when we use the modal without iframe the modal functions perfect。

这一直在吃我的时间有一段时间，如果有人能帮我弄清楚这一点，这将是非常棒的。

来源

2014-06-17 user2542493

从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在答案的底部，该模式能够被打开，没有问题关闭。

来源

2014-06-18 17:26:21

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

回答

相关问题