layer弹出层显示在top顶层的方法

因为项目框架用了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顶层的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

时间: 2019-09-10

如下所示: layer.open({ type : 2, title : '重命名', maxmin : true, shadeClose : true, // 点击遮罩关闭层 area : [ '200px', '150px' ], content : getContext() + "/node/torenamenode?nodeName="+nodeName, btn: ['确定'], yes: function(index, layero){ //do something/ /c

layer弹出层有多种格式的弹出,使用方法也不细述. 在弹出确认框可使用confirm或open方式 在open中 layer.open({ content: '确认提交?', btn: ["确认", "取消"], yes: function (index) { somefunciton... layer.close(index) }, btn2: function (index) { } }); layer中确认按钮在第一个位置,展示也是按顺序展示 如果和自己项目

项目中有弹出层的内容是不固定的,根据情况可能变长变短,于是就要求做layer弹出层的大小自适应,查询了api后发现 layer.iframeAuto方法可以实现,这里吐槽一点,ie浏览器的html没有被body撑大,而iframeAuto方法是根据html的高度计算的,导致我之前出现在ie下,调用iframeAuto后高度直接变零. 好了,做好了这一点之后,测试又提出一个问题,因为他是用小屏幕测试的,上面的位置没有变,弹出层变长以后按钮就被挤到下面去了.所以我需要做一个效果,在弹出层长度改变后重

1.click只能为页面现有的元素绑定点击事件,如果是动态生成的新的元素,是没有事 件的 2.而(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元素如果符合指定的元素,那就触发此事件不起作用:(document).on("click","指定的元素",function()); 方法则是将指定的事件绑定在document上,而新产生的元

如下所示: var html = '

' + '

角色名

弹出层插件layer确实很强大,官方提供主题太少,但是提供扩展的方式,由于项目使用统一颜色风格,就想扩展一下.官方默认的三种: 1.白蓝(默认) layer.alert('内容');//默认 2.墨绿 layer.alert('内容', { icon: 1, skin: 'layui-layer-molv' }) 3.深蓝 layer.alert('内容', { icon: 1, skin: 'layui-layer-lan' }) ==========重点啦==================

首先从js开始 /** * 检查是否选中 */ Sendandre.check = function () { var selected = $('#' + this.id).bootstrapTable('getSelections'); if (selected.length === 0) { Feng.info("请先选中表格中的某一记录!"); return false; } else { Sendandre.seItem = selected[0]; console.log(

今天在做项目的时候,做了一个弹出层,需要提示,就写了一个 layer.msg('雅蠛蝶 O.o', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); 可是结果却是这样的 雅蠛蝶看不见 查了好久,才知道是我代码的css设定了文字是白色,所以看不见.因为没有找到修改msg背景的办法,所以可以根本文字的颜色 layer.msg('雅蠛蝶 O.o', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); 以上

在参与的一个项目中,有一个这样的需求,导入基础数据成功后,默认弹出一个管理员登录页,点击登录按钮,需要跳到管理页面. 导入页按钮: 导入 导入按钮的点击事件,点击后会

前两天在Vue中引入了Vue-layer插件,实现了弹出层效果.不过由于是在22寸屏下开发的,没多想,弹出层的area的长宽就设定的都是800px,效果还很好.结果那给用户看,他们是12寸的笔记本.弹出层直接撑爆了页面,无法关闭... 网上的解决方案大都是以下几种: 1.改成百分比形式.有bug,下面细说. 2.改成em,rem等.同上 3.采用area:auto.可能是因为采用了swiper的原因吧,这样设置会导致弹出层出现"顶天立地"的效果 4.采用iframeAuto.这个没太搞

layer弹出窗口在弹出时指定了area,弹出后,如果当前页面(iframe)大小比弹出的窗口小,那么就会出现无法操作弹出窗口的尴尬情况. 如图: 弹出窗口比当前页面大,这时,唯有放大整个页面才能看到完全的弹出窗口,才可以操作. layui 为我们提供了 layer.style(); 方法来重新跳整窗口的大小 , 然后我们只需要写一个函数,得到当前document的宽度和高度, 判断弹出框是否大于document来调整窗口大小

前言:学习layer弹出框,之前项目是用bootstrap模态框,后来改用layer弹出框,在文章的后面,我会分享项目的一些代码(我自己写的). layer至今仍作为layui的代表作,她的受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力.目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer. 具体请

因为官方没有提供,只能自己实现了,包括按钮倒计时和标题倒计时,标题倒计时在注释部分:

html 弹出框显示到最顶层,layer弹出层显示在top顶层的方法相关推荐

  1. 微信小程序 -- 自定义底部弹出框(带动画--滑入滑出)

    实现这么一个功能,点击选项进行选择,效果是从底部弹出选项框(带滑出动画),选择了某项或者点击其他地方,隐藏(带滑出动画).效果图如下: 可适用于任何场景,如普通选项(如图)或者类似商城小程序选择商品属 ...

  2. axure 点击按钮弹出框_Axure动态面板教程:弹出框效果的制作

    作为一名互联网产品设计人员,相信很多同行每天上班电脑上都会运行着一个软件--Axure,她能帮助网站需求设计者,快捷而简便的创建基于网站构架图的带注释页面示意图.操作流程图.以及交互设计,并可自动生成 ...

  3. python如何判断是否有弹出框_Selenium2+python自动化47-判断弹出框存在(alert_is_present)【转载】...

    前言 系统弹窗这个是很常见的场景,有时候它不弹出来去操作的话,会抛异常.那么又不知道它啥时候会出来,那么久需要去判断弹窗是否弹出了. 一.判断alert源码分析 class alert_is_pres ...

  4. android 弹出框带标题栏,Android微信右上角弹出的对话选择框实现

     Android微信右上角弹出的对话选择框实现 我在之前的文章中曾给出了一个开源的微信UI大体实现方案具体代码实现,参见附录文章1.本文单单挑出一个微信的UI实现点:微信右上角弹出的选择对话框.如 ...

  5. div显示在上层_将某个div层显示在最上面(总结)

    今天遇到的这个问题,挺奇葩的.客户要求又联想输入(一台服务器支持).昨天已经做好一部分,今天要做的有些困难,因为现在这个联想列表是弹出来的一层. 大概是这样的,用户点击某个按钮,弹出一个层.然后在这里 ...

  6. qt自定义按钮类,每个按钮自带一个右键弹出框,如何使同一时刻只显示一个弹出框

    提要 继承于QPushButton的自定义按钮类,其右键弹出一个弹框,创建多个这样的自定义按钮在窗口中,每一时刻只显示一个右键弹出框,避免同一时刻,多个按钮右键弹出弹出框后,未及时关闭弹出框导致的同一 ...

  7. vue点击input框出现弹窗_vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v ...

  8. vue 组件弹出框点击显示隐藏

    本案实现的效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被 ...

  9. php使用popover,php中bootstrap框架.popover弹出框,鼠标移动到上面自动显示,离开自动消失...

    $(function(){//显示弹出框 $("[rel=name]").popover({ trigger:'manual', placement : 'bottom', //p ...

  10. php ajax弹出框传值,PHP_Yii2.0 模态弹出框+ajax提交表单,如题 我们使用模态弹出框+ajax - phpStudy...

    Yii2.0 模态弹出框+ajax提交表单 如题 我们使用模态弹出框+ajax提交表单 首先我们把index视图的create按钮添加data-toggle 和 data-target. 代码如下: ...

最新文章

  1. 10.Ubuntu下的source insight增加使用期限90天
  2. Java 负数、零、正数的个数
  3. 接口本地正常服务器报500_运维该如何解决服务器底层维护难题?
  4. 每日一题——王道考研2.2.4.1
  5. Golang——延迟调用defer
  6. sql 拼接int类型的字段_这才是SQL优化的正确姿势!
  7. Oracle 中伪数列ROWID
  8. python 循环控制语句结束,Python是如何循环控制语句的
  9. 服务器配置Token验证失败
  10. C语言再学习 -- 关键字return和exit ()函数
  11. 用python刷微信投票_Python——开发一个自动化微信投票器【附代码实例方法】
  12. 【JavaScript】VUE前端实现微信版录制音频wav格式转化成mp3格式和Base64
  13. WIN10应用商店(MicrosoftStore)闪退解决方法!!!
  14. Qt中多线程的一种使用
  15. 搜索引擎优化技巧解读
  16. 南京长江隧道发生连环追尾事故 没有人员伤亡-南京-隧道-追尾
  17. 网络资源、信息搜索技巧
  18. 基于Android的网上订餐系统
  19. SAP安全库存(时间)详解
  20. 多网络情况下,Kafka客户端如何选择合适的网络发起请求

热门文章

  1. linux中原子量的学习和理解
  2. 使用计算机SN号匹配对应的计算机名 作为计算机名字的一个小脚本 win10可用
  3. Thinksystem ST550安装windows2008R2
  4. 程序员高效率办公软件(推荐)。
  5. 哪个软件测试交易系统好用,交易系统测试结果的可信度检验
  6. 利用sublime3 + xmapp使用服务器调试
  7. 激光雷达原理及发展现状
  8. 组态王JAVA,组态王肿么实现点击按钮以后可以实现画面的运行
  9. java 解析yml文件
  10. python识别图片上的文字_Python程序图片和pdf上文字识别实例