【功能】遮罩層實現

時間 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。