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>

  • 相关阅读:
    monit安装配置
    php新加扩展模块
    centos6.5(64bit),python2.6.6安装MySQLdb模块
    esxi导出ovf模板注意事项
    gateone安装使用
    centos7上安装nagios及增加监控服务器
    zabbix自动发现主机并加入组绑定模板
    zabbix监控Windows-server
    zabbix设置中文并解决乱码问题
    centos7安装zabbix客户端并监控
  • 原文地址:https://www.cnblogs.com/yjbjingcha/p/7061919.html
Copyright © 2011-2022 走看看