移动端遮罩层,放在页面最上面,并且不能滚动

点击弹出遮罩层,需要规定到页面最上面,并且不让其滚动;

点击添加一个类:

.maskstyle{
    width:100%;
    height:100%;
    position:fixed;
    overflow:hidden;
}
.mask{
    diaplay:none;
    poaition:acsolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background:rgba(0,0,0,.3);
    z-index:2;
}

js控制显示隐藏

显示:
    $(".mask").show();
    $("html,body").addClass("maskstyle");

隐藏:
    $(".mask").hide();
    $("html,body").removeClass("maskstyle");
时间: 2024-08-07 02:57:21

移动端遮罩层,放在页面最上面,并且不能滚动的相关文章

解决移动端遮罩层无法覆盖全部页面问题

今天在做移动端项目的时候遇到遮罩层效果,按照以往的PC端我直接给同级遮罩层100%  给完之后测试看似完美但... 这就尴尬了.... 之后查阅了相关资料得知这里有个方法可以解决这个问题那就是“禁止全局滚动” 里面用的touch事件可参考 HTML5移动端触摸事件 document.addEventListaner('touchmove',stopTouchMove,false); //当手在屏幕上移动的时候执行stopTouchMove函数(阻止默认事件) //这个可以用在当遮罩层弹出的话执行

移动端遮罩层,内容大小改变动态大小

遮罩层的实现 .mask{ position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,.3); z-index:1000; display:none; } 解释:如果想在某个区域设置遮罩层,就把.mask放在某个区域的div下:根据自己的需求设置宽高,定位也要适当删减修改: 层级就根据自己需求设置大小: 本人遇到的情况是数据不固定,遮罩层大小不固定: 数据多的情况下遮罩层正常遮罩,如果没数据或

小程序遮罩层禁止页面滚动(遮罩层内部可以滚动)

wxml //使用scroll-view包裹 scrolly-y要写 [scroll-view scroll-y class="mask-box" catchtouchmove='ture'] [view class="box"] [view] [scroll-view] wxss //样式 .mask-box{ width: 300rpx; height: 300rpx; position: fixed; top: 50%; left: 50%; margin-t

jQuery遮罩层插件

在网页上经常遇到需要等待很久的操作,比如导出报表等.为了预防用户点击其他操作或者多次点击同个功能,需要用遮罩层把页面或者操作区盖住,防止用户进行下一步操作,同时可以提高界面友好度,让用户知道操作正在执行. $.fn.extend({ /** * 给元素添加遮罩层 * @param message {String} [可选]遮罩层显示内容 */ mask: function (message) { var $target = this, fixed = false, targetStatic =

在浏览器窗口上添加一个遮罩层

背景 在web2.0中,页面弹窗是一个很常见的交互方式,这样既可以避免不必要的页面跳转,也可以改进界面的布局和可交互性. 但是,浏览器原生的弹窗函数(alert, confirm, prompt)有着很大的局限性,主要是它们的展现UI一来很不美观,二来也不够灵活,因此,我们经常需要自行定义弹窗函数. 当我们要实现一个模式弹窗时(模式弹窗,即是说出现弹窗时,页面其它地方不可点击),通常的做法是用一个div将整个页面窗口遮挡住. 实现 下面,我们一步步地实现一种较为简洁有效的遮罩层: Step 1:

js遮罩层以及移动端的上拉框

今天发一个之前写的移动端的项目,主要是讲一下遮罩层的应用,以及顺带提一下移动开发的一些事情.首先按钮点击弹出遮罩层这个大家很熟悉了,这里还是给大家提供一份代码,跟通用的没太大区别,主要讲一下方法: $(function(){ var jiage=$(".jiage"),xingji=$(".xingji"),fj=$(".fj li"),qd=$(".qd");jiage.click(function(){tanchu();x

利用遮罩层做登录页面

<head> <style>   * {    margin: 0px;    padding: 0px;   }      #mask {    width: 100%;    background-color: black;    opacity: 0.3;    position: fixed;    left: 0px;    top: 0px;   }      #pop-login {    width: 300px;    height: 100px;    posi

清除移动端网站点击a标签时闪现的边框或遮罩层(CSS)

  在移动端网站,当你点击加了a标签的文字或图片时,该元素的周围会闪现一个蓝色的边框,在微信上的网站就是如此:而有的浏览器会闪现一个半透明遮罩层,比如移动端的Chrome浏览器,其实这些特效无非就是为了告诉用户已点击了该元素,提升用户体验,但有的时候你会觉得这些特效看起来很别扭,就想着清除它,其实这很简单,只要加上一句CSS就行了. 清除所有a标签在点击时出现的特效: a{ -webkit-tap-highlight-color:rgba(255,0,0,0);}

HTML兼容性 不声明doctype,IE9标准模式下position:fixed定位失败,导致遮罩层(Mask Layer)显示在页面最下方,FF和Chrome正常

问题描述:ie9标准模式下,老系统中的页面很少有写doctype的,但是不写这个声明,浏览器对于文档的解析机制就不一样了,特别是对于table和样式中的width, height 为100%布局,以及高度自适应的实现方案有影响,不了解的可以自行百度先,那么不写的话,又想加1个遮罩层的效果,一般我们遮罩层是借助position绝对定位实现的,可以写fixed,也可以写absolute,设置为fixed的时候,文档没有doctype,就会导致遮罩层出现在文档最下方,而不是绝对定位的效果,切换为ie9