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十个最常用的自定义函数(中文版)
Sep 07 Javascript
jquery 最简单的属性菜单
Oct 08 Javascript
Jquery上传插件 uploadify v3.1使用说明
Jun 18 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
WebView启动支付宝客户端支付失败的问题小结
Jan 11 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
Node 自动化部署的方法
Oct 17 Javascript
vue下载excel的实现代码后台用post方法
May 10 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
thinkphp多层MVC用法分析
2015/12/30 PHP
网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
2018/10/23 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
js数组的基本操作(很全自己整理的)
2014/10/16 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
详解微信小程序 wx.uploadFile 的编码坑
2017/01/23 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
2017/04/24 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
聊聊Vue.js的template编译的问题
2017/10/09 Javascript
React-Router如何进行页面权限管理的方法
2017/12/06 Javascript
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
JS中移除非数字最多保留一位小数
2018/05/09 Javascript
基于layui实现高级搜索(筛选)功能
2019/07/26 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python开发编码规范
2006/09/08 Python
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Python 数据结构之堆栈实例代码
2017/01/22 Python
pycharm安装图文教程
2017/05/02 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
win10下python2和python3共存问题解决方法
2019/12/23 Python
Python计算机视觉里的IOU计算实例
2020/01/17 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
会计专业自我鉴定范文
2013/10/06 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年读书月活动总结
2015/03/26 职场文书