JS弹出遮罩层

// create div
var mask=document.createElement("div");
mask.id="mask";
mask.style.position="absolute";
mask.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=25)";//IE的不透明设置
mask.style.opacity=0.4;//Mozilla的不透明设置
mask.style.background="black";
mask.style.top="0px";
mask.style.left="0px";
mask.style.width="10000px";
mask.style.height="888px";
mask.style.zIndex=1000;
document.body.appendChild(mask);

//delete div
var mask=document.getElementById("mask");
if(null==mask)return;
document.body.removeChild(mask);
时间: 2024-10-10 16:54:37

JS弹出遮罩层的相关文章

弹出遮罩层后禁止滚动效果

弹出遮罩层后,手指在手机上上下滑动 遮罩层下的页面出现滑动.下面代码解决这个问题 (1)触摸后不产生事件 //遮罩层禁止滚动 $('.searbox_mask_byInteg').bind("touchmove", function (e) { e.preventDefault(); }); (2)body不出现滚动条 $("body,.main").height($(window).height()).css({ "overflow-y": &

JS 点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

弹出遮罩层水平垂直居中

很多时候,登陆注册的时候,会需要弹出一个层,且后面有一层遮罩蒙版层,让后面不可点击状态 且需要这个弹出层是水平垂直居中显示的 固定宽高的水平垂直居中好实现 这里的弹出层,是随着内容撑开的,不固定宽高 ---------------------------- ------------------------------ .wrap .pop { width: 80%; height: auto; background: #FFFFFF; border: 1px #000 solid; -moz-b

小程序实现弹出遮罩层模态框

<view bindtap='showRule'>点击弹出模态框</view> <!--遮罩层--> <view class="ruleZhezhao {{isRuleTrue?'isRuleShow':'isRuleHide'}}"> <view class='ruleZhezhaoContent'> <image src='/images/zijia.png' class="select">

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> <meta http-equiv="Content-

判断是不是微信浏览器,如果是将弹出遮罩层提示在右上角浏览器中打开(一般用于下载东西)

<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid

弹出遮罩层后禁止底部页面滚动

stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, /***取消滑动限制***/ move(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='';/

js关于弹也遮罩层

1:什么是遮罩层 遮罩层:我是弹也一个 遮罩还有一个层,下面上图片看一效果 我们看到一个灰蒙蒙的遮盖(其实也是一个层)还有一个层(也就是我们展示的内容). 2:  弹出层效果居中分析 在这个图片中我们还看到我们弹出的层刚好在中间.下面在上个图看清楚的效果: 如果我们是一个“点”放在中间那么当然是$(window).width()/2,但我们是一个层,它有自已的高度和宽度,如果起始还是从中心点开始,你想它会在居间显示,显然 不对,它们靠右边了,所以我们减去它的高和宽 同是除以2 var posLe