JavaScript编写页面半透明遮罩效果的简单示例
(编辑：jimmy 日期: 2025/6/28 浏览：3 次 )
半透明遮罩层效果基本上都是使用插件实现的，下面为大家分享下使用原生js实现半透明遮罩效果，感兴趣的朋友可以参考下哈，希望对你熟悉原生js有所帮助
<div >
<h4><span>现在注册</span><span >关闭</span></h4>
<p>
<label> 用户名</label>
<input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" />
</p>
<p>
<label> 密 码</label>
<input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" />
</p>
<p>
<input type="submit" value="注册" class="sub" />
<input type="reset" value="重置" class="sub" />
</p>
</div>
<div ></div><!-- 遮罩层div-->
<script type="text/javascript">
var myAlert = document.getElementById("alert");
var myMask=document.getElementById('mask');
var reg = document.getElementById("content").getElementsByTagName("a")[0];
var mClose = document.getElementById("close");
reg.onclick = function()
{
myMask.style.display="block";
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "50%";
myAlert.style.left = "50%";
myAlert.style.marginTop = "-75px";
myAlert.style.marginLeft = "-150px";
document.body.style.overflow = "hidden";
}
mClose.onclick = function()
{
myAlert.style.display = "none";
myMask.style.display = "none";
}
</script>
</body>
</html>
全屏幕遮盖
<!DOCTYPE html>
<style>
#mask {
position:fixed;width:100%;
top:0px;left:0px;
_position:absolute;
_top:expression(documentElement.scrollTop);
background:rgba(0,0,0,0.5);
background:transparent\9;
filter:progid:DXImageTransform.Microsoft.Gradient(
startColorStr=#80000000,endColorStr=#80000000
);
display:none;
}
#mask_td {text-align:center;}
</style>
<img
src="/UploadFiles/2021-04-02/TheMagicConch.jpg">下一篇：JavaScript编写点击查看大图的页面半透明遮罩层效果实例