點選按鈕彈出一個居中div

admin發表於2017-04-08

本章節分享一段程式碼例項，它實現了點選按鈕彈出一個居中層的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin:0px;
  padding:0px;
  text-align:center;
}
.dialog{
  position: fixed;
  z-index:1;
  top: 50%;
  left: 50%;
  margin: -141px 0 0 -201px;
  width: 400px;
  height:280px;
  border:1px solid #CCC;
  line-height: 280px;
  text-align:center;
  font-size: 14px;
  background-color:#F4F4F4;
  overflow:hidden;
  display:none;
}        
</style>
<script>
window.onload = function () {
  var obt = document.getElementById("bt");
  var odiv = document.getElementsByTagName("div")[0];
  obt.onclick = function () {
    odiv.style.display = "block";
  }
}
</script>
</head>
<body>
<input type="button" id="bt" value="檢視效果"/>
<div class="dialog">螞蟻部落歡迎您</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面簡單介紹一下它的實現原理。

實現原理:

在預設狀態下，元素是隱藏的。

點選按鈕可以動態設定元素的style屬性值為display:block,這樣就可以顯示出來了。

元素的居中居中顯示實現原理是:

（1）.首先設定元素left和top屬性值分別為50%,這樣就可以讓元素的左上角實現居中。

（2）.然後設定元素的外邊距為負數，為元素的寬高的一半，這樣就可以實現中心點居中了。

在很多時候居中的背景是灰色半透明的具體可以參閱點選彈出居中帶有透明遮罩層視窗一章節。

相關文章