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 相关文章推荐
给Javascript数组插入一条记录的代码
Aug 30 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
javascript数字时钟示例分享
Apr 23 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
js实现的二级横向菜单条实例
Aug 22 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
vue-cli3 热更新配置操作
Sep 18 Javascript
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 curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
javascript学习之闭包分析
2010/12/02 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
2013/01/09 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
2015/03/04 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
2019/05/27 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python多线程编程简单介绍
2015/04/13 Python
python中的编码知识整理汇总
2016/01/26 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
解决pyttsx3无法封装的问题
2018/12/24 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
Python reduce函数作用及实例解析
2020/05/08 Python
Pandas之缺失数据的实现
2021/01/06 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
三星美国官网:Samsung美国
2017/02/06 全球购物
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
应届专科生个人的自我评价
2014/01/05 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
2014年企业党建工作总结
2014/12/18 职场文书
“学党章、守党纪、讲党规”学习心得体会
2016/01/14 职场文书
会计做账心得体会
2016/01/22 职场文书
PHP获取学生成绩的方法
2021/11/17 PHP
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
Nginx 匹配方式
2022/05/15 Servers