jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)


Posted in Javascript onAugust 25, 2016

最近项目遇到了遮罩层的一些问题,总结一下:

弹出遮罩层

遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的。

<style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-click="closeMask()"></div>
<div class="box" style="display:none">
<input v-click="closeMask()" class="inpt_bottomb white" value="取 消" type="button" />
<div class="clear"></div>
</div> 
</div>

#bg为透明度为0.6的一个遮罩页面,.box为遮罩层上的按钮。

//弹出遮罩
$("#bg").css({
display: "block", height: $(document).height()
});
var $box = $('.box');
$box.css({
//设置弹出层距离左边的位置
left: ($("body").width() - $box.width()) / 2 -5 + "px",
//设置弹出层距离上面的位置
top: ($(window).height() - $box.height()) + $(window).scrollTop() + "px",
display: "block"
});

有了触发遮罩的行为后,设置遮罩的高度为整个页面高度和可见性可见,然后对按钮出现的位置进行定位布局的设置,需要注意的是top属性要加上滚轮的高度,这样会保证我们的按钮会一直在视线之内。

关闭遮罩时也只需设置可见性即可。

效果图

jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

遇到问题

功能上是可以实现的,但还是有些缺陷问题,比如页面过长时遮罩层也会随着页面进行滑动,按钮的位置就会发生变化:

jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

解决方案PC端

pc端的解决思路就是在弹出遮罩层的时候取消已经存在的滚动条,达到无法滚动的效果。

也就是说给body添加overflow:hidden属性即可,IE6、7下不会生效,需要给html增加overflow:hidden属性。

解决方案移动端

移动端取消滚动条是达不到效果的,这时就需要去除遮罩层和按钮层的touchmove的默认事件,代码如下:

$('.box,#bg').bind("touchmove",function(e){
e.preventDefault();
});
Javascript 相关文章推荐
兼容Mozilla必须知道的知识。
Jan 09 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
Apr 18 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
JavaScript基于对象去除数组重复项的方法
Oct 09 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
jQuery组件easyui对话框实现代码
Aug 25 #Javascript
jQuery组件easyui基本布局实现代码
Aug 25 #Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 #Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 #Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 #Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 #Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 #Javascript
You might like
php模拟js函数unescape的函数代码
2012/10/20 PHP
Yii分页用法实例详解
2014/12/04 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
js null undefined 空区别说明
2010/06/13 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
对vuex中getters计算过滤操作详解
2019/11/06 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python使用scrapy采集数据过程中放回下载过大页面的方法
2015/04/08 Python
pygame学习笔记(1):矩形、圆型画图实例
2015/04/15 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python使用json序列化datetime类型实例解析
2018/02/11 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
Django 框架模型操作入门教程
2019/11/05 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
使用Html5、CSS实现文字阴影效果
2018/01/17 HTML / CSS
Paul Smith英国官网:英国国宝级时装品牌
2019/03/21 全球购物
个人自我鉴定写法
2013/11/30 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
年度考核表个人总结
2015/03/06 职场文书
永不妥协观后感
2015/06/10 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Python OpenCV形态学运算示例详解
2022/04/07 Python