前端页面需要遮罩层

遮罩层css 点击以后页面不能操作,直到时间结束

       .box{
            position: fixed;
            z-index: 200;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.2);
            display: none;
        }

效果图

js部分代码

h5部分  第一个div 遮罩层,点击事件在下一个div中,自己写逻辑

原文地址:https://www.cnblogs.com/wzbk/p/10736371.html

时间: 2024-11-05 20:24:16

前端页面需要遮罩层的相关文章

点击微信防封短链接强制使用浏览器打开页面的遮罩层最新实现方案!

相信在微信中做推广的朋友一定都遇到这种情况的.当你需要在微信中推广的时候会发现,自己的网页被微信屏蔽了,还有就是说APP的下载链接在微信中点击是无法下载的.必须要手动点击,右上角的三个点,然后选择在浏览器中打开,才可以顺利完成! 虽然说这个对于我们比较了解微信的朋友来说是很简单,很轻松的!但是使用微信的百分之九十都是小白,他们是不知道有这部操作的. 今天要加的是一个终极解决方法:强制使用浏览器打开页面的遮罩层. 再也不用管微信如何的更新,直接判断微信的UA,然后弹出一个遮罩提示用户在浏览器中打开

微信中域名被封-页面添加遮罩层提示用户使用浏览器打开(或下载APP)

微信营销是网络经济时代企业或个人营销模式的一种.是伴随着微信的火热而兴起的一种网络营销方式.但是也正因为如此,微信官方的屏蔽封杀域名的规范的也越来越严格.商家与微信之间进行着微信防封防屏蔽和封杀较量,可以说微信在广告拦截,封杀方面几乎是苛刻的.任何有广告嫌疑或被举报基本都百分百进入封杀名单.从2019下半年的“拼多多”链接不再被开放绿色通道便能看出腾讯的果决. 但是即使在如此,在微信防封上面仍然还是有巨大突破的.今天我给大家分享几种微信防封的行之有效方案,以下方案基本涵盖了市面上所有的微信推广方

前端小demo——遮罩层逐渐变透明

点击按钮触发事件使遮罩层逐渐变透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> img { width: 430px; height: 280px; } div { width: 1600px; height: 300px; background

简单的,当页面出现遮罩层的时候禁止滑动。遮罩层消失的时候可以滑动

$("body,html").css({"position":"fixed","overflow-y":"hidden"}); 禁止滑动的时候 $("body,html").css({"position":"static","overflow-y":"scroll"}); 可以滑动的时候 感觉禁止滑动的时候把

在iframe内页面完全加载完后,关闭父页面生成的div遮罩层

遮罩层div为iframe父页面生成,需在iframe内页面完全加载完后,关闭遮罩层 alertMsgClose() :函数为关闭遮罩层函数 此段代码在iframe页面内: <script> $(function () { window.parent.alertMsgClose();// iframe 外层页面关闭遮罩层 }); </script> 原文地址:https://www.cnblogs.com/tmdsleep/p/10984450.html

jquery 遮罩层显示img

如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶层添加dom对象,用来显示信息,默认隐藏,需要时在iframe中调用,宽高设置为100%. 实现如下: //遮罩层 .showmask { position: fixed; z-index: 99; width: 100%; height: 100%; background-color: silve

利用遮罩层做登录页面

<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

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

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

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

点击弹出遮罩层,需要规定到页面最上面,并且不让其滚动: 点击添加一个类: .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"