35

打开带有 iframe 的 Twitter Bootstrap Modal 的页面：

<div id="iframeModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="btn btn-danger pull-right" data-dismiss="modal" aria-hidden="true">Close</button>
        <div class="clearfix"></div>
    </div>
    <div class="modal-body">
        <iframe src="iframe-modal.html"></iframe> 
    </div>
    <div class="modal-footer">
    </div>
</div>

我正在寻找一种从 iframe 内部关闭此模式的方法。前任。单击内部的链接iframe-modal.html以关闭模式。我尝试过但未成功：

$('#iframeModal', window.parent.document).modal('hide');
$('#iframeModal', top.document).modal('hide');
$('#iframeModal').modal('hide');
4

4 回答 4

69

您始终可以创建一个可全局访问的函数来关闭 Bootstrap 模式窗口。

例如。

window.closeModal = function(){
    $('#iframeModal').modal('hide');
};

然后从 iframe 调用它：

window.parent.closeModal();
于 2013-03-06T15:23:20.637 回答
14

问题是 jQuery 事件正在与单个页面的 jQuery 实例一起注册。所以，$('#iframeModal', window.parent.document).modal('hide');实际上是要触发 iframe 中的隐藏事件，而不是父文档。

这应该有效：parent.$('#iframeModal').modal('hide');

这将使用父级的 jQuery 实例来查找项目（因此不需要上下文），然后它将在父级中正确触发事件。

于 2014-05-30T18:00:19.990 回答
4

如果您不知道idmodal 使用的另一种解决方案iframe：

添加函数CloseModal

function CloseModal(frameElement) {
     if (frameElement) {
        var dialog = $(frameElement).closest(".modal");
        if (dialog.length > 0) {
            dialog.modal("hide");
        }
     }
}

whereframeElement是对iframe元素容器的引用。

这个参数可以iframe像这样传递：

window.parent.CloseModal(window.frameElement);

更多关于window.frameElement你可以在这里找到

于 2016-07-05T10:52:24.417 回答
1

也可以触发点击关闭按钮：

$('#iframeModal button.mce-close', parent.document).trigger('click');
于 2017-01-18T09:13:32.693 回答