js+html实现遮罩层效果（收藏哦） - yjbjingcha

顺晟科技

2022-09-15 21:04:09

270

js+html实现遮罩层效果（收藏哦）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<title></title>
	</head>
	<body>
		<button onclick="coverDiv()">显示</button>
	</body>
	<script type="text/javascript">
	//显示遮罩
	function coverDiv(){  
        var procbg = document.createElement("div"); //首先创建一个div  
        procbg.setAttribute("id","mybg"); //定义该div的id  
        procbg.style.background = "#000000";  
        procbg.style.width = "100%";  
        procbg.style.height = "100%";  
        procbg.style.position = "fixed";  
        procbg.style.top = "0";  
        procbg.style.left = "0";  
        procbg.style.zIndex = "500";  
        procbg.style.opacity = "0.6";  
        procbg.style.filter = "Alpha(opacity=70)";  
        document.body.appendChild(procbg);  
    }  
    //取消遮罩  
    function hide() {  
        var body = document.getElementsByTagName("body");  
        var mybg = document.getElementById("mybg");  
        body[0].removeChild(mybg);  
    }
    /* 解释：实现的方式非常easy，就是动态创建一个div，
     * 设置的背景颜色等等，假设你是弹出一个框框，
     * 而且在框没有关闭之前是不能操作父级的元素中的，
     * 那么你就能够让你的框和这个遮罩div同一时候显示，
     * 而仅仅须要设置他们的z-index样式，来选择谁在
     * 上在下的顺序，就能够啦。
     * 欢迎增加Java交流群：398918539
     */
	</script>
</html>

上一篇：1.超文本标记语言入门下一篇：在HTML中实现和使用遮罩层

网站建设

Html

js+html实现遮罩层效果（收藏哦） - yjbjingcha

js+html实现遮罩层效果（收藏哦）