在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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
js实现文本框支持加减运算的方法
Aug 19 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 Javascript
js仿搜狐视频记录片列表展示效果
May 30 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue2.0+SVG实现音乐播放圆形进度条组件
Sep 21 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Vue中component标签解决项目组件化操作
Sep 04 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静态文件生成类实例分析
2015/01/03 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
php实现概率性随机抽奖代码
2016/01/02 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
php使用自定义函数实现汉字分割替换功能示例
2017/01/30 PHP
Laravel框架下的Contracts契约详解
2020/03/17 PHP
让焦点自动跳转
2006/07/01 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
利用js读取动态网站从服务器端返回的数据
2014/02/10 Javascript
浅谈javascript中for in 和 for each in的区别
2015/04/23 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
node通过npm写一个cli命令行工具
2017/10/12 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
node打造微信个人号机器人的方法示例
2018/04/26 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
Python多进程池 multiprocessing Pool用法示例
2018/09/07 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
Python线程threading模块用法详解
2020/02/26 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python脚本第一行如何写
2020/08/30 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
详解Python常用的魔法方法
2021/06/03 Python
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers