點擊登錄彈出層以及遮罩層關閉

 function openNew(){
	  //獲取頁面的高度和寬度
	  var sHeight=document.documentElement.scrollHeight;
	  var sWidth=document.documentElement.scrollWidth;
	  //可視區域的高度和寬度
	  //如果說頁面是一個豎向的頁面 那麼可視區域的寬度和高度是一樣的
	  var wHeight=document.documentElement.clientHeight;
	  
	  
	  var oMask=document.createElement("div");
	      oMask.id="mask";
		  oMask.style.height=sHeight+"px";
		  oMask.style.width=sWidth+"px";
		  document.body.appendChild(oMask)
		  
    var oLogin=document.createElement("div");
        oLogin.id="login";
	  oLogin.innerHTML="<div class='loginCon'><div id='close'></div></div>"
	  document.body.appendChild(oLogin)
	  //獲取login的寬度和高度
	  var dHeight=oLogin.offsetHeight;
	  var dWidth=oLogin.offsetWidth;
	     //給login的left和top賦值
		 oLogin.style.left=(sWidth-dWidth)/2+"px";
		 oLogin.style.top=(sHeight-dHeight)/2+"px";
		 
		 var oClose=document.getElementById("close");
		 oMask.onclick=oClose.onclick=function(){
			 document.body.removeChild(oMask);
			 document.body.removeChild(oLogin);
		 }
  }
  
  window.onload=function(){
	  var oBtn=document.getElementById("btnLogin");
	  oBtn.onclick=function(){
		 openNew();
	  }
  }

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章