<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<script type="text/javascript">
window.onload=function()
{
var delmask=document.getElementById("btclose");
if(document.getElementById("maskDiv")){
document.getElementById("maskDiv").style.display = 'block';
}else{
alert(document.documentElement.clientWidth + 'px, ' + window.innerHeight +'px')
var mask = document.createElement('div');
mask.id = 'maskDiv';
mask.style.width = window.innerWidth +'px';
mask.style.height = window.innerHeight +'px';
mask.style.background = '#000000';
mask.style.opacity = '0.1';
mask.style.position = 'absolute';
mask.style.display = 'block'; // 取消遮罩 设置为 none
mask.style.top = 30+'px';
mask.style.zIndex = 999; // 设置元素层级
document.body.appendChild(mask);
}
delmask.onclick = function()
{alert('a')
if(document.getElementById("maskDiv")){
document.getElementById("maskDiv").style.display = 'none';
document.getElementById("contenttip").innerHTML="遮罩已去除";
}
}
}
</script>
</head>
<body>
<center>
<button id="btclose">关闭遮罩</button>
<br/>
<br/>
<br/>
<p id='contenttip'>JS 动态创建元素，实现遮罩效果</p>
</center>
</body>
</html>JS 动态创建 div元素 并实现遮罩效果
猜你喜欢
转载自blog.csdn.net/shihongji/article/details/81118937
今日推荐
周排行