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

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

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实现弹窗下底部页面禁止滑动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 用jQuery实现的智能隐藏、滑动效果的返回顶部代码

    在线DEMO:传送门 HTML代码(放在页面任意位置,并用CSS美化): 复制代码 代码如下: <p id="back-to-top"><a href="#top"><span></span>回到顶部</a></p> JS代码: <script type="text/javascript" src="js/jquery-1.7.2.min.js"&g

  • jQuery滑动效果实现方法分析

    jQuery滑动效果实现方法分析

    本文实例讲述了jQuery滑动效果实现方法.分享给大家供大家参考,具体如下: jQuery 滑动方法: 1.slideDown()方法:用于向下滑动元素 语法: $(selector).slideDown(speed,callback); 2.slideUp()方法:用于向上滑动元素 语法: $(selector).slideUp(speed,callback); 3.slideToggle()方法:可以在slideDown()与slideUp()方法之间进行切换. 语法: $(selector

  • jQuery animate(滑块滑动效果代码)

    jQuery animate(滑块滑动效果代码)

    HTML 复制代码 代码如下: <p><a href="#" class="run">Run</a></p> <div id="box"> </div> <p><a href="#" class="run">Run</a></p><div id="box">

  • jquery左右全屏大尺寸多图滑动效果代码分享

    jquery左右全屏大尺寸多图滑动效果代码分享

    本文实例讲述了jquery左右全屏大尺寸多图滑动效果.分享给大家供大家参考.具体如下: 这是一款基于jquery实现的banner焦点图播放效果的插件,图片播放时处于满屏的状态,很具有画面感,呈现的效果更佳充实,用户的视觉体验更加具体,是一款很时尚大方的特效代码. 运行效果图:                                        -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换

  • jQuery AnythingSlider滑动效果插件

    jQuery AnythingSlider滑动效果插件

    jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关. webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件-AnythingSlider[滑动] 滑动 在一个固定区域,循环显示几段内容,这种方式很像旧时的拉洋片,2009年,这种

  • jQuery层动画定位滑动效果的方法

    本文实例讲述了jQuery层动画定位滑动效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jquery实现鼠标拖拽滑动效果来选择数字的方法

    本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法.分享给大家供大家参考.具体如下: 这是使用jquery ui实现的一个精美实用的效果,可以通过鼠标拖拽滑动效果来选择数字 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • jQuery实现图片滑动效果

    jQuery实现图片滑动效果

    思路:当鼠标进入元素时,触发hover中的第一个函数,离开时触发hover中的第二个函数. 如图所示: 代码如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } ul{ width: 1000px; m

  • Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

    Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

    此Jquery特效是一款Jquery+CSS3实现简洁大气带滑动效果的弹出层,应用范围很广泛,比如用在消息提示.弹出层显示内容.弹出层登录等,带遮罩效果,虽然没有封装成插件,但使用起来也非常简单,宽度和高度直接调样式. 包含了以下功能: 1.弹出层 2.带关闭按钮 3.遮罩层效果 4.从上向下滑动显示 5.点击层外面任何地方关闭 6.绑定控制按钮 7.内容过多自动显示滚动条 如果不满足大家的要求,自己可以二次开发哦 效果如下: 在线演示

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

    在项目开发过程中,经常会遇到带有弹窗的页面,尤其是在移动端.在没有特别要求的情况下,弹窗弹出后,弹窗下的底部页面依然能够滑动.为了得到更好的用户体验,需要做到触发弹窗时,弹窗底部页面禁止滑动,关闭弹窗时,弹窗底部页面恢复滑动,具体思路如下: 1.触发弹窗时,获取滚动条所在的位置. 2.将底部页面的position属性设置为fixed. 3.设置底部页面的位置为触发弹窗时的初始位置. 4.关闭弹窗时,恢复底部页面的position属性. 5.恢复底部页面的滚动条高度. //触发弹窗底部页面禁止滑动

  • Vue出现弹出层时禁止底部页面跟随滑动

    背景:最近在写一个vue项目,当出现弹出层时,发现底部页面跟随滚动,但是产品不想要这种效果,于是找各种资料,发现很多说法,但是试了试,发现有的根本就不行,比如说有人提出用vue中提供的@touchmove.prevent方法来解决,但是我试了没起作用,或者@touchmove.prevent.stop也不起作用.下面是几种可以解决问题的方式,仅供参考: 1.在有弹出框的页面中,加上以下方法,弹出框出现时调用禁止滚动方法stopScroll(),弹出框去掉是调取允许滚动方法canScroll()即

  • vue实现页面切换滑动效果

    vue实现页面切换滑动效果

    本文实例为大家分享了vue实现页面切换滑动的具体代码,供大家参考,具体内容如下 试着用Vue做了个页面切换时滑动的效果,如下示例,源码 这里使用了Vue的transition组件,具体可见文档 直接看实现过程 先在本机安装vue-cli npm install -g @vue/cli 初始化一个项目 vue create hello-world 创建完毕后安装vue-router和vuex,现在vue-cli3支持图形化界面,可以直接在项目目录用ui启动,在管理页面点击安装 vue ui 然后建

  • jquery实现弹窗（系统提示框）效果

    jquery实现弹窗（系统提示框）效果

    本文实例为大家分享了jquery实现系统提示框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery-1.11.1.js"></script> <title>弹窗效果</title> <styl

  • 禁止弹窗中蒙层底部页面跟随滚动的几种方法

    场景概述 众所周知,弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想要的效果,因此需要阻止这种行为. 那么,如何阻止呢?请看以下分析: 方案分析 方案一 打开蒙层时,给body添加样式: overflow: hidden; height: 100%; 在某些机型下,你可能还需要给根节点添加样式: overflow: hidden; 关闭蒙层时,移

  • vue 解决mintui弹窗弹起来,底部页面滚动bug问题

    经过dom层层注释缩小反馈终于找到问题所在. 问题经过 我在弹起弹窗的时候,设置了popupVisible为true 然后触发了vue的updated生命周期钩子函数 然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘 然后就导致了底部页面向上滚动 解决办法 去掉updated函数里面的重绘方法 补充知识:项目总结之关于vue中使用mint-ui的mt-popup出现滚动穿透问题的解决总结 说实话,使用Mint-ui这个ui组件的过程中遇到了

  • 浅析jquery如何判断滚动条滚到页面底部并执行事件

    本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件.首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. 首先理解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.

  • jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)

    本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • python中的selenium实现自动向下滚动页面并指定最大滑动距离

    需要selenium控制的chrome向下滑动,自动加载一些内容,核心代码是: browser.execute_script("window.scrollBy(0,300)") 这行可以向下滑动300个像素 需要的工具函数如下: def roll_window_to_bottom(browser, stop_length=None, step_length=500):     """selenium 滚动当前页面,向下滑     :param browse

随机推荐