jQuery 从 iframe 内部关闭 Bootstrap 模式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15249678/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close Bootstrap modal from inside iframe
提问by Constantin.FF
Page which opens Twitter Bootstrap Modal with iframe inside:
打开带有 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>
And I am looking for a way to close this modal from inside the iframe.
Ex. clicking a link inside the iframe-modal.htmlto 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');
回答by Dzulqarnain Nasir
You can always create a globally accessible function which closes the Bootstrap modal window.
您始终可以创建一个全局可访问的函数来关闭 Bootstrap 模式窗口。
eg.
例如。
window.closeModal = function(){
$('#iframeModal').modal('hide');
};
Then from the iframe, call it using:
然后从 iframe 中调用它：
window.parent.closeModal();
回答by JoshMB
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('hide');实际上是要触发 iframe 中的隐藏事件，而不是父文档。
This should work: parent.$('#iframeModal').modal('hide');
这应该有效： parent.$('#iframeModal').modal('hide');
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 实例来查找项目（因此不需要上下文），然后它将在父级中正确触发事件。
回答by demo
One more solution in case you don't know idof modal which use iframe:
如果您不知道id使用 modal 的另一种解决方案iframe：
Add function CloseModal
添加函数CloseModal
function CloseModal(frameElement) {
if (frameElement) {
var dialog = $(frameElement).closest(".modal");
if (dialog.length > 0) {
dialog.modal("hide");
}
}
}
where frameElementis reference to iframeelement container.
其中frameElement是对iframe元素容器的引用。
And this parameter can be passed from iframelike so:
这个参数可以iframe像这样传递：
window.parent.CloseModal(window.frameElement);
More about window.frameElementyou can find here
更多关于window.frameElement你可以在这里找到
回答by dtmiRRor
You can also trigger the click the close button:
您还可以触发单击关闭按钮：
$('#iframeModal button.mce-close', parent.document).trigger('click');
