关闭iframe内部的Bootstrap模式
Close Bootstrap modal from inside iframe
打开带有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');
你总是可以创建一个全局可访问的函数来关闭Bootstrap模式窗口。
。
window.closeModal = function(){
$('#iframeModal').modal('hide');
};
然后从iframe中调用它:
window.parent.closeModal();
问题是jQuery事件正在被注册为单个页面的jQuery实例。因此,$('#iframeModal', window.parent.document).modal('hide');
实际上将触发iframe中的隐藏事件,而不是父文档。
这应该工作:parent.$('#iframeModal').modal('hide');
这将使用父类的jQuery实例来查找项目(因此不需要上下文),然后它将在父类中正确触发事件。
如果你不知道id
的模式使用iframe
:
添加函数 closemode
function CloseModal(frameElement) {
if (frameElement) {
var dialog = $(frameElement).closest(".modal");
if (dialog.length > 0) {
dialog.modal("hide");
}
}
}
其中frameElement
为,引用iframe
元素容器
这个参数可以像这样从iframe
传递:
window.parent.CloseModal(window.frameElement);
关于window.frameElement
的更多信息请点击这里
还可以触发点击关闭按钮:
$('#iframeModal button.mce-close', parent.document).trigger('click');
相关文章:
- 如何动态更改React Bootstrap模式的内容
- 在Bootstrap模式窗口中打开远程内容
- bootstrap模式在windowsvista上的IE8上运行极其缓慢
- Jquery UI don'使用bootstrap 3模式时效果不佳
- 在ajax回调(safari)中调用bootstrap模式显示
- 一旦Bootstrap模式选项已经存在,请更改该选项
- 当内部的任何模式关闭时,Bootstrap模式关闭
- bootstrap日期选择器轨道无法通过带有bootstrap模式的simple_form工作
- Bootstrap 3模式从水平到内联的变化-调整大小很尴尬
- Twtitter Bootstrap模式显示事件多次触发
- 确定哪个按钮打开了Bootstrap 3模式
- 如何使用 javascript 隐藏 Bootstrap 模式
- Bootstrap模式加载远程内容,生成2个请求
- c#asp.net如何使用bootstrap模式将视频源文件名添加到不同的媒体类型中
- bootstrap模式中的Twitter共享按钮在firefox上不起作用
- Bootstrap 3模式并不总是激活ajax代码
- PHP和Bootstrap模式变量
- Bootstrap 3模式-从底部滑入并粘牢
- 如何清理(销毁)Twitter Bootstrap 3.2模式表单内容
- 如何在AngularJS Bootstrap模式中从AJAX调用加载JSON数据