zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    基于Dubbo的压测调优实例
    R语言之Apriori算法应用
    Linux中的用户和组
    R语言中的循环及其扩展:iter和foreach
    R在Windows下连接Oracle数据库
    R语言之机器学习程序包(更新)
    R语言之数据结构
    windows环境下node安装教程(超详细)
    windows环境下elasticsearch安装教程(超详细)
    MongoDB分片介绍
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7061919.html
Copyright © 2011-2022 走看看