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 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
js活用事件触发对象动作
Aug 10 Javascript
在JavaScript中实现类的方式探讨
Aug 28 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
js对象浅拷贝和深拷贝详解
Sep 05 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
node-red File读取好保存实例讲解
Sep 11 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 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实现递归无级分类――代码少
2015/07/29 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
jQuery实现图片渐入渐出切换展示效果
2015/08/15 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
js继承实现方法详解
2016/12/16 Javascript
Mac下使用charles遇到的问题以及解决办法
2017/01/10 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
JavaScript学习笔记之惰性函数示例详解
2017/08/27 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
在Python的Django框架中加载模版的方法
2015/07/16 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
解决python运行效率不高的问题
2020/07/20 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
AmazeUI 评论列表的实现示例
2020/08/13 HTML / CSS
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
优秀大学生的自我评价
2014/01/16 职场文书
颁奖晚会主持词
2014/03/25 职场文书
运动会演讲稿
2014/05/07 职场文书
项目申请汇报材料
2014/08/16 职场文书
讲党性心得体会
2014/09/03 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
2015年教研工作总结
2015/05/23 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
Python OpenGL基本配置方式
2022/05/20 Python
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS