在iframe中使bootstrap的模态框在父页面弹出问题


Posted in Javascript onAugust 07, 2017

这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法。

效果展示

修改前页面

在iframe中使bootstrap的模态框在父页面弹出问题

修改后页面

在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的模态框在父页面弹出问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
浅谈jQuery 选择器和dom操作
Jun 07 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
JS判断微信扫码的方法
Aug 07 #Javascript
AngularJs每天学习之总体介绍
Aug 07 #Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 #Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 #Javascript
ES6新增数据结构WeakSet的用法详解
Aug 07 #Javascript
bootstrap Table插件使用demo
Aug 07 #Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 #Javascript
You might like
怎样在PHP中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php中flush()、ob_flush()、ob_end_flush()的区别介绍
2013/02/17 PHP
php mail to 配置详解
2014/01/16 PHP
php生成excel文件的简单方法
2014/02/08 PHP
CodeIgniter钩子用法实例详解
2016/01/20 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
Prototype Array对象 学习
2009/07/19 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
js实现九宫格图片半透明渐显特效的方法
2015/02/16 Javascript
究竟什么是Node.js?Node.js有什么好处?
2015/05/29 Javascript
JS实现日期时间动态显示的方法
2015/12/07 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
js canvas实现红包照片效果
2018/08/21 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
Element Steps步骤条的使用方法
2020/07/26 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python解析xml文件操作实例
2014/10/05 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python基于回溯法子集树模板解决数字组合问题实例
2017/09/02 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Django中自定义admin Xadmin的实现代码
2019/08/09 Python
python GUI库图形界面开发之pyinstaller打包python程序为exe安装文件
2020/02/26 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
墨尔本照明批发商店:Mica Lighting
2017/12/28 全球购物
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
单位工程竣工验收方案
2014/03/16 职场文书
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
浅谈Node的内存泄露问题
2022/05/06 NodeJs