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 相关文章推荐
求解开jscript.encode代码的asp函数
Feb 28 Javascript
利用javascript/jquery对上传文件格式过滤的方法
Jul 25 Javascript
jquery中this的使用说明
Sep 06 Javascript
jQuery实现单击和鼠标感应事件
Feb 01 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
10个最优秀的Node.js MVC框架
Aug 24 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 Javascript
js中apply和call的理解与使用方法
Nov 27 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
东方红 - 来复式再生机的修复
2021/03/02 无线电
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
PHP 使用pcntl和libevent 实现Timer功能
2013/10/27 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
JavaScript动态改变表格单元格内容的方法
2015/03/30 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
JavaScript闭包实例详解
2016/06/03 Javascript
js表单登陆验证示例
2016/10/19 Javascript
Vue.js实战之Vuex的入门教程
2017/04/01 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
深入了解JavaScript 防抖和节流
2019/09/12 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
JS实现放大镜效果
2020/09/21 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
python自定义异常实例详解
2017/07/11 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
pytorch实现保证每次运行使用的随机数都相同
2020/02/20 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
eDreams葡萄牙:全球最大的在线旅行社之一
2019/04/15 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
顶撞领导检讨书
2014/01/29 职场文书
董事长秘书职责
2014/01/31 职场文书
党委班子剖析材料
2014/08/21 职场文书
如何解决goland,idea全局搜索快捷键失效问题
2022/04/03 Golang
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers