这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法。
效果展示
修改前页面
修改后页面
实现思路
要想使模态框在顶级页面打开,我想到的方法是使bootstrap的模态框弹在父页面弹出即可。
首先我们将需要弹出的div单独写一个页面,当子页面需要弹出时,在父页面弹出div即可。
将模态框单独写为一个页面
主页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div class="modal fade" id="ajax" role="basic" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div> </body> <script> $("#ajax").modal({ remote: "./model.html" }); </script> </html>
模态框页面
<div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> 这是模态框 </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">保存</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </div> </div>
这样就可以将模态框的div单独写为一个页面
修改主页面,加入子页面
修改后主页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <table width="100%" height="720px" border="1"> <tr> <td> <iframe id="iframe1" name="iframe1" src="iframe1.html" width="100%" height="100%"></iframe> </td> <td></td> </tr> <tr> <td></td> <td> <iframe name="iframe2" src="iframe2.html" width="100%" height="100%"></iframe> </td> </tr> </table> <input type="text" id="textId" value="234" /> <div class="modal fade" id="ajax" role="basic" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> </div> </div> </div> </body> <script> function modalOut(url) { $("#ajax").modal({ remote: url; }); } </script> </html>
这样主页面就有2个子页面,并且将弹出模态框的方法封装至modalOut(url)方法中
子页面弹出模态框
当子页面需要弹出模态框时,加载父页面中的modalOut(url)方法即可:
子页面js如下
var _iframe = window.parent; _iframe.modalOut('xxx.html');
以上就是解决子页面中弹出模态框无法覆盖全部页面的解决办法,
注意:所以html中未加载js,请自行加载bootstrap相关的js。
总结
以上所述是小编给大家介绍的在iframe中使bootstrap的模态框在父页面弹出问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
主要内容:用法,实例,选项,方法,实例,事件,实例弹出框(Popover)与工具提示(Tooltip)类似,提供了一个扩展的视图。如需激活弹出框,用户只需把鼠标悬停在元素上即可。弹出框的内容完全可使用 Bootstrap 数据 API(Bootstrap Data API)来填充。该方法依赖于工具提示(tooltip)。 如果您想要单独引用该插件的功能,那么您需要引用 popover.js,它依赖于 工具提示(Tooltip)插件。或者,正如 B
本文向大家介绍BootStrap中的模态框(modal,弹出层)功能示例代码,包括了BootStrap中的模态框(modal,弹出层)功能示例代码的使用技巧和注意事项,需要的朋友参考一下 bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 body 标签的
问题内容: 我有一个iframe,为了访问父元素,我实现了以下代码: 如何使用jQuery获得相同的结果? 更新 :或如何使用jquery访问iFrame父页面? 问题答案: 要在iFrame的父项中查找,请使用: $()包装器的第二个参数是要在其中搜索的上下文。默认为文档。
本文向大家介绍整理关于Bootstrap模态弹出框的慕课笔记,包括了整理关于Bootstrap模态弹出框的慕课笔记的使用技巧和注意事项,需要的朋友参考一下 整理自慕课笔记 插件的源文件:modal.js。 在 Bootstrap 框架中把模态弹出框统一称为 Modal。这种弹出框效果在大多数 Web 网站的交互中都可见。比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作,也
主要内容:用法,实例,选项,方法,实例,事件,实例模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。 如果您想要单独引用该插件的功能,那么您需要引用 modal.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。 用法 您可以切换模态框(Modal)插件
问题内容: 基本上,我有一个嵌入页面的页面,并且有一些需要从父页面调用的JavaScript例程。 现在,相反的操作非常简单,因为您只需要调用,但是不幸的是,我需要恰好相反。 请注意,我的问题是不会改变的源URL的,但是调用在定义的函数。 问题答案: 假设您的iFrame的ID为“ targetFrame”,而您要调用的函数为: 您也可以使用代替访问框架。