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 相关文章推荐
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
DOM节点删除函数removeChild()用法实例
Jan 12 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
js关于命名空间的函数实例
Feb 05 Javascript
Three.js快速入门教程
Sep 09 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
php使用post数组的键值创建同名变量并赋值的方法
2015/04/03 PHP
CodeIgniter针对lighttpd服务器URL重写的方法
2015/06/10 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
Openlayers测量距离与面积的实现方法
2020/09/25 Javascript
js调用网络摄像头的方法
2020/12/05 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
通过python3实现投票功能代码实例
2019/09/26 Python
通过实例了解python property属性
2019/11/01 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
导游个人求职信范文
2014/03/23 职场文书
班长竞选演讲稿
2014/04/24 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
同事打架检讨书
2015/05/06 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
新闻稿件写作范文
2015/07/18 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android