解决layer弹层遮罩挡住窗体的问题


Posted in Javascript onAugust 17, 2018

使用代码:

<div>
   <div>这里面某个按钮触发弹层<div>
   <div id='dialog' hidden='hidden'></div>
</div>

如果上面的按钮触发了弹层 layer.open 且content是某个DOM元素

content:$('#dialog')

那么这里弹出层,遮罩会遮住到弹窗导致操作不了。

官网给出的说法是 如果弹层的内容content是某个DOM元素的话,要放在body的根节点下。不能放在div里面了。

我看了html代码,最后生成的遮罩DOM元素的位置是body的子级,所以知道弹层的DOM要和遮罩的DOM 要在同一层。

所以这里再弹层的success的事件里面进行了处理,将遮罩的DOM位置挪动了一下,和弹层DOM元素同一级,代码如下:

success:function(layero){
   var mask = $(".layui-layer-shade");
   mask.appenTo(layero.parent());
   //其中:layero是弹层的DOM对象
}

这样 弹层的遮罩DOM元素和弹层元素就在同一层了,就不会挡着弹层了。

以上这篇解决layer弹层遮罩挡住窗体的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript显示随机图像或引用
Apr 21 Javascript
JS继承 笔记
Jul 13 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
写得不错的jquery table鼠标经过变色代码
Sep 27 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
vue单页缓存方案分析及实现
Sep 25 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 Javascript
javaScript Array api梳理
Mar 31 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 #Javascript
Vue组件创建和传值的方法
Aug 17 #Javascript
webpack多入口多出口的实现方法
Aug 17 #Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 #Javascript
layer.open关闭父窗口 以及调用父页面的方法
Aug 17 #Javascript
vue+element的表格实现批量删除功能示例代码
Aug 17 #Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 #Javascript
You might like
php使用for语句输出三角形的方法
2015/06/09 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
three.js实现3D视野缩放效果
2017/11/16 Javascript
详解angularjs 学习之 scope作用域
2018/01/15 Javascript
vuex的简单使用教程
2018/02/02 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
ES6中new Function()语法及应用实例分析
2020/02/19 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Windows下Eclipse+PyDev配置Python+PyQt4开发环境
2016/05/17 Python
python实现下载文件的三种方法
2017/02/09 Python
TensorFlow在MAC环境下的安装及环境搭建
2017/11/14 Python
Python cookbook(数据结构与算法)从字典中提取子集的方法示例
2018/03/22 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
canvas拼图功能实现代码示例
2018/11/21 HTML / CSS
澳大利亚最大的女装零售商:Millers
2017/09/10 全球购物
德国孕妇装和婴童服装网上商店:bellybutton
2018/04/12 全球购物
Linux的主要特性
2014/10/06 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
网上签名寄语活动留言
2014/01/18 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
社区志愿者培训方案
2014/06/10 职场文书
领导班子对照检查材料
2014/09/22 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android