点击按钮弹出一个居中div
分类：实例代码
本章节分享一段代码实例，它实现了点击按钮弹出一个居中层的效果。
代码实例如下:
<!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）.然后设置元素的外边距为负数，为元素的宽高的一半，这样就可以实现中心点居中了。
在很多时候居中的背景是灰色半透明的具体可以参阅点击弹出居中带有透明遮罩层窗口一章节。