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 获取URL参数的插件
Mar 04 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
jQuery中:only-child选择器用法实例
Jan 03 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
jQuery原理系列-css选择器的简单实现
Jun 07 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 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中在PDO中使用事务(Transaction)
2011/05/14 PHP
php 数组动态添加实现代码(最土团购系统的价格排序)
2011/12/30 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
如何实现textarea里的不同文本显示不同颜色
2014/01/20 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
JavaScript操作Cookie详解
2015/02/28 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JavaScript高阶函数_动力节点Java学院整理
2017/06/28 Javascript
javascript实现自由编辑图片代码详解
2019/06/21 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python difflib模块示例讲解
2017/09/13 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
Django组件cookie与session的具体使用
2019/06/05 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
python输出数学符号实例
2020/05/11 Python
超级实用的8个Python列表技巧
2020/08/24 Python
实现CSS3中的border-radius(边框圆角)示例代码
2013/07/19 HTML / CSS
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
Saks Fifth Avenue澳洲/亚太地区:萨克斯第五大道精品百货店
2019/06/09 全球购物
《真想变成大大的荷叶》教学反思
2014/04/14 职场文书
中小学生安全教育观后感
2015/06/17 职场文书
自书遗嘱范文
2015/08/07 职场文书
干部理论学习心得体会
2016/01/21 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript