从iframe中关闭Bootstrap模式。

Page which opens Twitter Bootstrap Modal with iframe inside:

打开Twitter引导模式和iframe的页面:

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

And I am looking for a way to close this modal from inside the iframe. Ex. clicking a link inside the iframe-modal.html to close the modal. What I have tried, but non successful:

我正在寻找一种方法从iframe中关闭这个模态。在iframe-modal中单击一个链接。html关闭模式。我试过的，但不成功:

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

4 个解决方案

#1

You can always create a globally accessible function which closes the Bootstrap modal window.

您总是可以创建一个全局可访问的函数来关闭引导模式窗口。

eg.

如。

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

Then from the iframe, call it using:

然后从iframe中调用它:

window.parent.closeModal();

#2

The issue is that jQuery events are being registered with the individual page's instance of jQuery. So, $('#iframeModal', window.parent.document).modal('hide'); is actually going to trigger the hide event in the iframe, not the parent document.

问题是jQuery事件被注册到单个页面的jQuery实例中。所以,美元(# iframeModal,window.parent.document).modal(隐藏的);实际上会在iframe中触发隐藏事件，而不是父文档。

This should work: parent.$('#iframeModal').modal('hide');

这应该工作:父母。$(' # iframeModal ').modal(隐藏的);

This will use the parent's instance of jQuery to find the item (so no context is needed), and it will then fire the event correctly in the parent.

这将使用父的jQuery实例来查找项目(因此不需要上下文)，然后在父进程中正确地触发事件。

#3

One more solution in case you don't know id of modal which use iframe :

如果你不知道使用iframe的模态id，还有一个解决方案:

Add function CloseModal

添加函数CloseModal

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

where frameElement is reference to iframe element container.

其中frameElement是对iframe元素容器的引用。

And this parameter can be passed from iframe like so:

这个参数可以从iframe中传递，如下所示:

window.parent.CloseModal(window.frameElement);

More about window.frameElement you can find here

更多关于windows . frameelement的信息可以在这里找到

#4

You can also trigger the click the close button:

您也可以触发点击关闭按钮:

$('#iframeModal button.mce-close', parent.document).trigger('click');

#1