解决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中的new的使用方法与注意事项
May 16 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
javascript设置金额样式转换保留两位小数示例代码
Dec 04 Javascript
JavaScript高级程序设计(第三版)学习笔记6、7章
Mar 11 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
小程序实现多选框功能
Oct 30 Javascript
11个教程中不常被提及的JavaScript小技巧(推荐)
Apr 17 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
php自动给文章加关键词链接的函数代码
2012/11/29 PHP
php中动态调用函数的方法
2015/03/16 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
JavaScript 参考教程
2006/12/29 Javascript
jquery ajax,ashx,json的用法总结
2014/02/12 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
JS制作手机端自适应缩放显示
2015/06/11 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
AngularJS实现Input格式化的方法
2016/11/07 Javascript
用angular实现多选按钮的全选与反选实例代码
2017/05/23 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
JQuery获取元素尺寸、位置及页面滚动事件应用示例
2019/05/14 jQuery
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
Django在win10下的安装并创建工程
2017/11/20 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python3.7 的新特性详解
2019/07/25 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
Django用户登录与注册系统的实现示例
2020/06/03 Python
Python实现石头剪刀布游戏
2021/01/20 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
企业行政文员岗位职责
2013/12/03 职场文书
关于青春的演讲稿
2014/05/05 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
查摆问题整改措施
2014/10/24 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
2015年财务人员工作总结
2015/04/10 职场文书
学生会自荐信
2019/05/16 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书