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 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
javascript判断机器是否联网的2种方法
Aug 09 Javascript
客户端js性能优化小技巧整理
Nov 05 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
jQuery点击其他地方时菜单消失的实现方法
Apr 22 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
Jan 04 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
Oct 18 Javascript
JS实现求5的阶乘示例
Jan 21 Javascript
node express使用HTML模板的方法示例
Aug 22 Javascript
JS实现分页导航效果
Feb 19 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
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
2014/06/26 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
nodeJS微信分享
2017/12/20 NodeJs
Js面试算法详解
2018/04/08 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python连接mysql并提交mysql事务示例
2014/03/05 Python
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
zookeeper python接口实例详解
2018/01/18 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
python super用法及原理详解
2020/01/20 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
中药专业大学生医药工作求职信
2013/10/25 职场文书
护士自荐信
2013/10/25 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
军事博物馆观后感
2015/06/05 职场文书
js Proxy的原理详解
2021/05/25 Javascript
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
收音机爱好者玩机13年,简评其使用过的19台收音机
2022/04/30 无线电