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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
详解SPA中前端路由基本原理与实现方式
Sep 12 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
vue实现折线图 可按时间查询
Aug 21 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 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
PHP 常见郁闷问题答解
2006/11/25 PHP
php date()日期时间函数详解
2010/05/16 PHP
ini_set的用法介绍
2014/01/07 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
Js 回车换行处理的办法及replace方法应用
2013/01/24 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
JS实现图片无间断滚动代码汇总
2014/07/30 Javascript
node.js解决获取图片真实文件类型的问题
2014/12/20 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
2015/10/08 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
react.js 获取真实的DOM节点实例(必看)
2017/04/17 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
vue实现分页组件
2020/06/16 Javascript
原生js实现日期选择插件
2020/05/21 Javascript
js实现简易ATM功能
2020/10/27 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
教大家使用Python SqlAlchemy
2016/02/12 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
python实现鸢尾花三种聚类算法(K-means,AGNES,DBScan)
2019/06/27 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
ECOSUSI官网:女式皮革背包
2019/09/27 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
什么是反射
2012/03/17 面试题
养殖人员的创业计划书范文
2013/12/26 职场文书
学生打架检讨书1000字
2014/01/16 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
民事答辩状范本
2015/05/21 职场文书
禁毒主题班会教案
2015/08/14 职场文书