工具：电脑；浏览器；ultraedit软件；
*** 作步骤如下：
1、打开UE编辑器，新建一个空白的html文件和css文件；
2、在html文件中输入以下html代码；
3、在css文件中输入以下css代码；
4、编辑完成之后，选择格式为UTF8-无 BOM模式，保存文件；
5、在浏览器中打开此html文件，可以看到最终想要实现的遮住全屏效果。
1、实现原理
* 实际上d出层、遮罩层和原页面显示分别为三个不同的div
* d出层的层级在遮罩层之上，遮罩层的层级在原页面显示之上；
* 遮罩层有通明效果
* 遮罩层没有实际意义，则无需在html部分就写上，当然写上同样可以实现
2、代码实现
html语言如下：
<body><center>
<div ><input type="button" value="go" onclick="show()"></div>
<div id="alert" style="display:none">
<form>
登录
<input type="text"><input type="password"><input type="submit" value="login">
</form>
</div>
</center>
</body>
javascript实现d出层和遮罩层：
<span style="font-size:12px"><script>function show(){var alertPart=document.getElementById("alert")
alertPart.style.display="block"
alertPart.style.position = "absolute"
alertPart.style.top = "50%"
alertPart.style.left = "50%"
alertPart.style.marginTop = "-75px"
alertPart.style.marginLeft = "-150px"
alertPart.style.background="cyan"
alertPart.style.width="300px"
alertPart.style.height="200px"
alertPart.style.zIndex = "501"
var mybg = document.createElement("div")
mybg.setAttribute("id","mybg")
mybg.style.background = "#000"
mybg.style.width = "100%"
mybg.style.height = "100%"
mybg.style.position = "absolute"
mybg.style.top = "0"
mybg.style.left = "0"
mybg.style.zIndex = "500"
mybg.style.opacity = "0.3"
mybg.style.filter = "Alpha(opacity=30)"
document.body.appendChild(mybg)
document.body.style.overflow = "hidden"
}
</script></span>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）