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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
jQuery操作之效果详解
May 19 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery封装animate.css的实例
Jan 04 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
基于jQuery的时间戳与日期间的转化
Jun 21 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
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
CodeIgniter 完美解决URL含有中文字符串
2016/05/13 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
2018/05/04 Javascript
vue.js内置组件之keep-alive组件使用
2018/07/10 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[07:39]第一届亚洲邀请赛回顾视频
2017/02/14 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
大学生水文观测实习自我鉴定
2013/09/29 职场文书
车间调度岗位职责
2013/11/30 职场文书
报告会主持词
2014/04/02 职场文书
环保建议书作文500字
2015/09/14 职场文书
教学反思怎么写
2016/02/24 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL