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学习笔记(三)显示当时时间的代码
Apr 08 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
Bootstrap 手风琴菜单的实现代码
Jan 20 Javascript
jquery实时获取时间的简单实例
Jan 26 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
Vue的生命周期操作示例
Sep 17 Javascript
vue 开发企业微信整合案例分析
Dec 02 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
探索浏览器页面关闭window.close()的使用详解
Aug 21 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中实现中文字符进制转换原理分析
2011/12/06 PHP
php导入导出excel实例
2013/10/25 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
网页自动跳转代码收集
2009/09/27 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
2013/04/08 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
html dom节点操作(获取/修改/添加或删除)
2014/01/23 Javascript
JSON取值前判断
2014/12/23 Javascript
jQuery中innerWidth()方法用法实例
2015/01/19 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
使用python绘制人人网好友关系图示例
2014/04/01 Python
简单讲解Python中的闭包
2015/08/11 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python super()方法原理详解
2020/03/31 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
自动化专业毕业生求职信
2014/06/18 职场文书
大学同学会活动方案
2014/08/20 职场文书
说好普通话圆梦你我他演讲稿
2014/09/21 职场文书
财务人员岗位职责
2015/02/03 职场文书
2016党员入党决心书
2015/09/22 职场文书
canvas绘制折线路径动画实现
2021/05/12 Javascript
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Python实现聚类K-means算法详解
2022/07/15 Python