jQuery实现弹窗下底部页面禁止滑动效果


Posted in jQuery onDecember 19, 2017

在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端。在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动。为了得到更好的用户体验,需要做到触发弹窗时,弹窗底部页面禁止滑动,关闭弹窗时,弹窗底部页面恢复滑动,具体思路如下:

1.触发弹窗时,获取滚动条所在的位置。

2.将底部页面的position属性设置为fixed。

3.设置底部页面的位置为触发弹窗时的初始位置。

4.关闭弹窗时,恢复底部页面的position属性。

5.恢复底部页面的滚动条高度。

//触发弹窗底部页面禁止滑动
function fixed(){
  var scrollTop = document.body.scrollTop;//设置背景元素的位置
  $('#content').attr('data-top',scrollTop);
  var contentStyle = document.getElementById("content").style;//content是可以滚动的背景元素id名称
  contentStyle.position = 'fixed'; //contentStyle是第二步的变量,设置背景元素的position属性为‘fixed'
  contentStyle.top = "-"+scrollTop+"px";
}

//关闭弹窗底部页面恢复滑动
function fixed_cancel(){
  var contentStyle = document.getElementById("content").style;
  var scrollTop = $('#content').attr('data-top');//设置背景元素的位置
  contentStyle.top = '0px';//恢复背景元素的初始位置
  contentStyle.position ="static";//恢复背景元素的position属性(初始值为absolute,就恢复为absolute,以此类推)
  $(document).scrollTop(scrollTop);//scrollTop,设置滚动条的位置
}

触发弹窗时执行fixed()方法;关闭弹窗时触发fixed_cancel()方法;即可获得更好的用户体验。

总结

以上所述是小编给大家介绍的jQuery实现弹窗下底部页面禁止滑动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
Jquery获取radio选中的值
May 05 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
jquery实现左右轮播图效果
Sep 28 jQuery
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
JQuery常用简单动画操作方法回顾与总结
Dec 07 jQuery
jquery将信息遍历到界面上实例代码
Jan 21 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
jquery获取transform里的值实现方法
Dec 12 #jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 #jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 #jQuery
jquery学习笔记之无new构建详解
Dec 07 #jQuery
You might like
基于empty函数的判断详解
2013/06/17 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
smarty模板引擎中变量及变量修饰器用法实例
2015/01/22 PHP
jQuery 对Select的操作备忘记录
2011/07/04 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
详解Bootstrap创建表单的三种格式(一)
2016/01/04 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
webpack打包nodejs项目的方法
2018/09/26 NodeJs
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
10 行 Python 代码教你自动发送短信(不想回复工作邮件妙招)
2018/10/11 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
2021/02/19 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
凯特·丝蓓英国官网:Kate Spade英国
2016/11/07 全球购物
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
求职简历推荐信范文
2013/12/02 职场文书
高一政治教学反思
2014/01/28 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
孔庙导游词
2015/02/04 职场文书
2015年计划生育责任书
2015/05/08 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
重温入党誓词主持词
2015/06/29 职场文书
吧主申请感言怎么写
2015/08/03 职场文书