弹出遮罩层后禁止滚动效果【实现代码】

方法一：

$('.shade').bind( "touchmove", function (e) {
   e.preventDefault();
});

方法二：

$("body,.main").height($(window).height()).css({
  "overflow-y": "hidden"
});

以上这篇弹出遮罩层后禁止滚动效果【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 弹出遮罩层后禁止滚动效果【实现代码】

    方法一: $('.shade').bind( "touchmove", function (e) { e.preventDefault(); }); 方法二: $("body,.main").height($(window).height()).css({ "overflow-y": "hidden" }); 以上这篇弹出遮罩层后禁止滚动效果[实现代码]就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我

  • jQuery弹出遮罩层效果完整示例

    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"> <head&

  • jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

    本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层 二是点击弹出 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

  • jQuery点击按钮弹出遮罩层且内容居中特效

    jQuery点击按钮弹出遮罩层且内容居中特效

    本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi

  • JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】

    JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】

    本文实例讲述了JavaScript实现的弹出遮罩层特效.分享给大家供大家参考,具体如下: 这篇给大家分享一个简单的遮罩层特效,先上效果图. 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>查看,修改,删除</title> <script src="http://libs.baidu

  • vue 弹出遮罩层样式实例

    以前做遮罩层都是写最小高度来占满屏,但是总会出现问题,也没改变,今天一个人在交流群上问这个时,看到一个回答解决了我这一个bug,学到了,现在记录一下样式. <div class='popContainer'></div> div.popContainer{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.3); } 这样遮罩层就会占满屏了 补充知识:vue 锁定蒙版 不让

  • jQuery阻止移动端遮罩层后页面滚动

    css代码: .ovfHiden{overflow: hidden;height: 100%;} jquery: $(".header_right").click(function(){ $('html,body').addClass('ovfHiden'); //使网页不可滚动 $(".searchbox").show(); }) $(".yg-close").click(function(){ $('html,body').removeCla

  • vue 遮罩层阻止默认滚动事件操作

    在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面. vue中提供 @touchmove.prevent 方法可以完美解决这个问题 <div class="dialog" @touchmove.prevent ></div> 如果不是使用Vue的话,可以给body添加overflow:hidden属性解决 补充知识:vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时,弹出层下面还可以滚动) vue项目中弹出层时,蒙版下还可以滚动页面. 移动端解决方案

  • vue遮罩层如何阻止滚动

    目录 vue遮罩层阻止滚动 vue解决遮罩层滚动方法 vue遮罩层阻止滚动 给vue用fixed定位加一个遮罩层,滚动鼠标滚轮发现下面一层的页面随之滚动,那么如何阻止下层页面滚动? 我这里给遮罩层加一个取消鼠标滚轮默认行为的事件 <div class="popup" @mousewheel="mousewheel">    <div class="cen">弹框内容</div> </div> mou

  • jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    jQuery实现单击弹出Div层窗口效果(可关闭可拖动)

    本文实例讲述了jQuery实现单击弹出Div层窗口效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的可拖动可关闭的弹出框效果,网上已经有很多类似效果了,网页上实现这种效果其实并不难,现在又有了jquery让我们用,更方便了,本代码演示了在CSS代码.JavaScript代码和HTML三者结合的情况下,如何实现一个可关闭的弹出窗口,鼠标点击关闭按钮后将其关闭,然后会显示打开按钮,单击这个按钮即弹出这个层窗口. 运行效果截图如下: 在线演示地址如下: http://demo.jb51

随机推荐