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定时机制
Oct 29 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
Vue的Options用法说明
Aug 14 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
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
php截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
如何设置mysql允许外网访问
2013/06/04 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
使用jquery插件实现图片延迟加载技术详细说明
2011/03/12 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
2015/03/20 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python实现扫描日志关键字的示例
2018/04/28 Python
查看django版本的方法分享
2018/05/14 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
详解Django admin高级用法
2019/11/06 Python
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
高中学校对照检查材料
2014/08/31 职场文书
学校党员个人问题整改措施思想汇报
2014/10/08 职场文书
银行授权委托书格式
2014/10/10 职场文书