【功能】遮罩层实现

时间 2019-11-18

标签功能实现繁體版

原文原文链接

遮罩层固定于窗口中央，不会随滚动条滑动。javascript

遮罩层实现：
css

<style type="text/css">
/*遮罩层 CSS*/
 #close{ 
   text-shadow: 0 1px 0 #fff;
   opacity: .2;
   filter: alpha(opacity=20);
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:15px; 
    color: #000;
    font-size: 16px;
    font-weight: 700;
    }
.black_overlay{
	/* display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80); */
	background-color:#000;
	opacity:0.8;
	filter: alpha(opacity=80); 
	position:absolute; 
	left:0;
	top:0;
	z-index:1000;
}
.white_content {
	display: none;
	position:fixed;
	width:450px;
	background-color: white;
	border-radius: 6px;
	z-index:1002;
	overflow: auto;
}
</style>

遮罩层JS：html

/*遮罩 JS*/
     
    function setLoginPosition(show_div,bg_div){
        //获取页面的高度和宽度
        var sWidth=document.body.scrollWidth;
        var sHeight=document.body.scrollHeight;

        //获取页面的可视区域高度和宽度
        var wHeight=document.documentElement.clientHeight;
        var wWidth=document.documentElement.clientWidth;

        var oMask = window.document.getElementById(bg_div);
        oMask.style.height=sHeight+"px";
        oMask.style.width=sWidth+"px";

        //获取登陆框及其高度和宽度
        var oLogin = window.document.getElementById(show_div);
        var oHeight=oLogin.offsetHeight;
        var oWidth=oLogin.offsetWidth;

        //设置登陆框的left和top
        oLogin.style.left=sWidth/2-oWidth/2+"px";
        oLogin.style.top=wHeight/2-oHeight/2+"px";
     }
    function ShowDiv(show_div,bg_div){
        document.getElementById(show_div).style.display="block";
        document.getElementById(bg_div).style.display="block";
        setLoginPosition(show_div,bg_div);
        // var bgdiv = document.getElementById(bg_div);
        // bgdiv.style.width = document.body.scrollWidth;
        // // bgdiv.style.height = $(document).height();
        // $("#"+bg_div).height($(document).height());
        // };
    }

    function Close(){
        function CloseDiv()
        {
        var show_div = document.getElementById("MyDiv");
        var bg_div = document.getElementById("fade");
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
        };
    
       return false;
    }
        //关闭弹出层
    function CloseDiv(show_div,bg_div)
        {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
        };
    
    $("#loginbtn").on('click', function () {
            var txtName = $("#name").val();
            var txttags = $("#tags").val();
           if (trim(txtName) == "") {
                 alert("用户名或密码为空");
            }
            else {
                alert("dd");
            }
        });

HTML：java

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/*遮罩层 CSS*/
 #close{ 
   text-shadow: 0 1px 0 #fff;
   opacity: .2;
   filter: alpha(opacity=20);
    width:30px; 
    height:30px; 
    cursor:pointer; 
    position:absolute; 
    right:5px; 
    top:15px; 
    color: #000;
    font-size: 16px;
    font-weight: 700;
    }
.black_overlay{
	/* display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80); */
	background-color:#000;
	opacity:0.8;
	filter: alpha(opacity=80); 
	position:absolute; 
	left:0;
	top:0;
	z-index:1000;
}
.white_content {
	display: none;
	position:fixed;
	width:450px;
	background-color: white;
	border-radius: 6px;
	z-index:1002;
	overflow: auto;
}
</style>
 <script language="javascript" type="text/javascript">
/*遮罩 JS*/
     
    function setLoginPosition(show_div,bg_div){
        //获取页面的高度和宽度
        var sWidth=document.body.scrollWidth;
        var sHeight=document.body.scrollHeight;

        //获取页面的可视区域高度和宽度
        var wHeight=document.documentElement.clientHeight;
        var wWidth=document.documentElement.clientWidth;

        

        var oMask = window.document.getElementById(bg_div);
        oMask.style.height=sHeight+"px";
        oMask.style.width=sWidth+"px";

        //获取登陆框及其高度和宽度
        var oLogin = window.document.getElementById(show_div);
        var oHeight=oLogin.offsetHeight;
        var oWidth=oLogin.offsetWidth;

        //设置登陆框的left和top
        oLogin.style.left=sWidth/2-oWidth/2+"px";
        oLogin.style.top=wHeight/2-oHeight/2+"px";

     }
    function ShowDiv(show_div,bg_div){
        
        document.getElementById(show_div).style.display="block";
        document.getElementById(bg_div).style.display="block";
        setLoginPosition(show_div,bg_div);
        // var bgdiv = document.getElementById(bg_div);
        // bgdiv.style.width = document.body.scrollWidth;
        // // bgdiv.style.height = $(document).height();
        // $("#"+bg_div).height($(document).height());

        // };
    }

    function Close(){
        
        function CloseDiv()
        {
        var show_div = document.getElementById("MyDiv");
        var bg_div = document.getElementById("fade");
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
        };
    
       return false;
        
    }
        //关闭弹出层
    function CloseDiv(show_div,bg_div)
        {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
        };
    
    $("#loginbtn").on('click', function () {
            var txtName = $("#name").val();
            var txttags = $("#tags").val();
           if (trim(txtName) == "") {
                 alert("用户名或密码为空");
            }
            else {
                alert("dd");
            }
        });  
</script>
</head>
<body>
<p ><span onclick="ShowDiv('MyDiv','fade')">添加资源</span></p> 

<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content" >
         <form class="elegant-aero" id="itemForm" method="post" action="${config.basePath}/assets/add.html" enctype="multipart/form-data">
            <h1>添加资源<span id="close" onclick="CloseDiv('MyDiv','fade')">X</span></h1>
            <label>
            <span>资源名称 :</span>
            <input type="text" name="name" id="name" placeholder="请输入资源名称"/>
            </label>
            </form>

</div>
</body>
</html>

这样就能够实现了，详细的注解，稍后有时间再补post