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与C#编码解码
Dec 03 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
Aug 22 Javascript
js select实现省市区联动选择
Apr 17 Javascript
小发现之浅谈location.search与location.hash的问题
Jun 23 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
Django+Vue.js搭建前后端分离项目的示例
Aug 07 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
Jul 09 Javascript
vue中的计算属性和侦听属性
Nov 06 Javascript
如何在 Vue 表单中处理图片
Jan 26 Vue.js
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
浅谈PDO的rowCount函数
2015/06/18 PHP
如何在PHP中生成随机数
2020/06/04 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
密码强度检测效果实现原理与代码
2013/01/04 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
Taro小程序自定义顶部导航栏功能的实现
2020/12/17 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
Python将图片转换为字符画的方法
2020/06/16 Python
在python中pandas的series合并方法
2018/11/12 Python
python matplotlib画图库学习绘制常用的图
2019/03/19 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
家乐福巴西网上超市:Carrefour巴西
2016/10/31 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
护理学专业推荐信
2013/12/03 职场文书
员工培训邀请函
2014/01/11 职场文书
致铅球运动员广播稿精选
2014/01/12 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
工程承诺书怎么写
2014/05/24 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
七年级数学教学反思
2016/02/17 职场文书
Python趣味爬虫之用Python实现智慧校园一键评教
2021/05/28 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL
python 离散点图画法的实现
2022/04/01 Python
MySQL创建管理LIST分区
2022/04/13 MySQL
MySQL数据库表约束讲解
2022/06/21 MySQL
MySQL导致索引失效的几种情况
2022/06/25 MySQL