點選彈出居中使用者登入框效果

admin發表於2019-01-27

分享一段程式碼例項，它結合JavaScript實現了點選按鈕彈出使用者登入介面效果。

介面帶有半透明層，並且點選關閉按鈕可以關閉層。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
*{ 
  margin:0; 
  padding:0; 
  font-size:12px; 
} 
#content  { 
  width:200px; 
  margin:0px auto; 
  text-align:center 
} 
#content a  { 
  font-size:30px; 
  color:#369; 
  font-weight:700; 
} 
#thelogin  { 
  border:1px solid #369; 
  width:300px; 
  height:150px; 
  background:#e2ecf5; 
  z-index:1000; 
  position:absolute; 
  display:none; 
} 
#thelogin h4  { 
  height:20px; 
  background:#369; 
  color:#fff; 
  padding:5px 0 0 5px; 
} 
#thelogin h4 span{float:left;} 
#thelogin h4 span#close  { 
  margin-left:210px; 
  font-weight:500; 
  cursor:pointer; 
} 
#thelogin p {padding:12px 0 0 30px;} 
#thelogin p input {width:120px;margin-left:20px;} 
#thelogin p input.myinp {border:1px solid #ccc;height:16px;} 
#thelogin p input.sub {width:60px;margin-left:30px;} 
</style> 
<script type="text/javascript"> 
window.onload=function() { 
  var thelogin=document.getElementById("thelogin"); 
  var reg=document.getElementById("bt"); 
  var mClose=document.getElementById("close"); 
  reg.onclick=function() { 
    thelogin.style.display="block"; 
    thelogin.style.position="absolute"; 
    thelogin.style.top="50%"; 
    thelogin.style.left="50%"; 
    thelogin.style.marginTop="-75px"; 
    thelogin.style.marginLeft="-150px"; 
    mybg=document.createElement("div"); 
    mybg.setAttribute("id","mybg"); 
    mybg.style.background="#000"; 
    mybg.style.width="100%"; 
    mybg.style.height="100%"; 
    mybg.style.position="absolute"; 
    mybg.style.top="0"; 
    mybg.style.left="0"; 
    mybg.style.zIndex="500"; 
    mybg.style.opacity="0.3"; 
    mybg.style.filter="Alpha(opacity=30)"; 
    document.body.appendChild(mybg); 
  } 
  mClose.onclick=function() { 
    thelogin.style.display="none"; 
    mybg.style.display="none"; 
  } 
} 
</script> 
</head> 
<body> 
  <div id="content"><button id="bt">點選顯示登陸框</button></div> 
  <div id="thelogin"> 
    <h4><span>現在註冊</span><span id="close">關閉</span></h4> 
    <p><label>使用者名稱</label><input type="text" class="myinp" /></p> 
    <p><label>密　碼</label><input type="password" class="myinp" /></p> 
    <p>
      <input type="submit" value="註冊" class="sub" />
      <input type="reset" value="重置" class="sub" />
    </p> 
</div> 
</body> 
</html>

一.實現原理:

預設狀態下，登入框處於隱藏狀態，當點選登入按鈕會將其設定為顯示狀態，且垂直水平居中對齊；登入框的z-index屬性值設定為1000，它的作用後面會介紹。同時建立一個div，採用絕對定位，尺寸為全屏，z-index屬性值為500，比登入視窗要小，這樣登入視窗就會位於它的上面。

二.程式碼註釋:

（1）.window.onload=function(){}，文件完全載入完成再去執行函式中的程式碼。

（2）.var thelogin=document.getElementById("thelogin")，獲取id為thelogin的元素。

（3）.var reg=document.getElementById("bt")，獲取id為bt的元素。

（4）.var mClose=document.getElementById("close")，獲取id為cloas的元素。

（5）.reg.onclick=function(){}，為reg元素繫結點選事件處理物件。

（6）.thelogin.style.display="block",將thelogin元素設定為顯示。

（7）.thelogin.style.position="absolute"，將thelogin元素設定為絕對定位。

（8）.thelogin.style.top="50%"，將thelogin元素的top屬性值設定為50%。

（9）.thelogin.style.left="50%"，將thelogin元素的left屬性值設定為50%。

（10）.thelogin.style.marginTop="-75px"，在top屬性值50%的基礎上再上移75px，實現垂直居中對齊。

（11）.thelogin.style.marginLeft="-150px"，在left屬性值50%的基礎上再左移75px，實現水平居中對齊。

（12）.mybg=document.createElement("div")，用於建立一個div元素。

（13）.mybg.setAttribute("id","mybg")，將div的id屬性值設定為mybg。

（14）.mybg.style.background="#000"，將div的背景顏色設定為#000。

（15）.mybg.style.width="100%"和mybg.style.height="100%"，將div設定為全屏。

（16）.mybg.style.position="absolute"，將div設定為絕對定位。

（17）.mybg.style.top="0"，將div的top屬性值設定為0.

（18）.mybg.style.left="0"，將div的left屬性值設定為0.

（19）.mybg.style.zIndex="500"，將div的z-index屬性值設定為500.

（20）.ybg.style.opacity="0.3"和mybg.style.filter="Alpha(opacity=30)，設定div透明度。

（21）.document.body.appendChild(mybg)，為body新增建立的div。

（22）.mClose.onclick=function(){}，mClose繫結點選事件處理函式，點選此按鈕，登陸框和背景隱藏。

三.相關閱讀:

（1）.document.getElementById()參閱document.getElementById()一章節。

（2）.opacity參閱CSS3 opacity一章節。

（3）.appendChild()參閱JavaScript appendChild()一章節。

（4）.createElement()參閱document.createElement()一章節。

（5）.絕對定位參閱CSS position:absolute 絕對定位一章節。

（6）.z-index參閱CSS z-index屬性一章節。

相關文章