layer弹出层显示在top顶层的方法


Posted in Javascript onSeptember 11, 2019

因为项目框架用了iframe,所以在用layer时,默认layer.open弹出的窗口只能在iframe子窗口区域显示。现在想让layer在父窗口或者说框架的最顶层显示,想到用top.layer.open或者parent.layer.open,但是没反应。后面想到应该是在父页面中没有导入layer.js文件,导入后就能正常显示在父窗口页面区域了。

显示在顶层窗口

top.layer.open({
   type: 2,
   title: '标题',
   shadeClose: true,
   shade: 0.3,
   area : ['850px' , '450px'],
   content: 'http://sentsin.com' //这里content是一个URL,
  });

显示在父窗口

parent.layer.open({
   type: 2,
   title: '标题',
   shadeClose: true,
   shade: 0.3,
   area : ['850px' , '450px'],
   content: 'http://sentsin.com' //这里content是一个URL,
  });

top和parent是浏览器的内置对象,top表示最顶层容器,parent表示父容器,这样一来就是实现了iframe控制父页面或者顶层页面的弹窗效果了。

以上这篇layer弹出层显示在top顶层的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的new使用
Mar 20 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
js复制网页内容并兼容各主流浏览器的代码
Dec 17 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
详解js数组的完全随机排列算法
Dec 16 Javascript
vue-cli配置文件——config篇
Jan 04 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
Aug 06 Javascript
vue实现element-ui对话框可拖拽功能
Aug 17 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
layer.js之回调销毁对话框的例子
Sep 11 #Javascript
layer.alert回调函数执行关闭弹窗的实例
Sep 11 #Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 #Javascript
浅谈layui框架自带分页和表格重载的接口解析问题
Sep 11 #Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 #Javascript
js中offset,client , scroll 三大元素知识点总结
Sep 11 #Javascript
js实现点击图片在屏幕中间弹出放大效果
Sep 11 #Javascript
You might like
ThinkPHP之R方法实例详解
2014/06/20 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP实现验证码校验功能
2017/11/16 PHP
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
jquery实现鼠标滑过显示二级下拉菜单效果
2015/08/24 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python命令启动Web服务器实例详解
2017/02/23 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
tensorflow -gpu安装方法(不用自己装cuda,cdnn)
2020/01/20 Python
Python判断三段线能否构成三角形的代码
2020/04/12 Python
win7上tensorflow2.2.0安装成功 引用DLL load failed时找不到指定模块 tensorflow has no attribute xxx 解决方法
2020/05/20 Python
Django Form常用功能及代码示例
2020/10/13 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
python基于opencv实现人脸识别
2021/01/04 Python
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
养牛场项目建议书
2014/05/13 职场文书
运动会标语
2014/06/21 职场文书
安全目标管理责任书
2014/07/25 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
党性分析自查总结
2014/10/14 职场文书
创业的9条正确思考方式
2019/08/26 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server