通过点击一个button按钮,弹出一个对话框,实现背景变暗,
1.要有2个事件,第一个就是点击按钮,弹出对话框。第二个就是点击对话框的*号关闭对话框,回复原来样式,第二个在第一个之内,就是说先弹出对话框才有关闭对话框
2.效果事件就是使用display属性,block,显示div效果,none,隐藏div效果
贴上js代码
var obtn = document.getElementsByTagName("button")[0];
var oOverlay = document.getElementById("overlay");
var oWin = document.getElementById("win");
var oClose = document.getElementById("close");
obtn.onclick = function(){
oOverlay.style.display = "block";
oWin.style.display ="block";
oClose.onclick = function(){
oOverlay.style.display="none";
oWin.style.display="none";
}
}
css 主要就是弹出层的样式
先要设置弹出层底层的效果,其实也就是整个body,为弹出层的父元素。
要添加透明效果,适应opacity属性,设置透明度,并且最开始要设置display为none;
弹出层,设置position为absolute,top,left,定位
弹出框的标题,字体,背景,底部边框,内边距,
关闭按钮是通过span实现的,在是标题的子元素,所以不用定位,继承父元素而定位,到最右边,需要设置内边距和边框。对话框 的字设置为左右对齐,首行缩进2em;
贴上css代码
html,
body {
height: 100%;
overflow: hidden;
}
body,
div,
h2 {
margin: 0;
padding: 0;
}
center {
padding-top: 10px;
}
#overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
display: none;
}
#win {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
background: #ccc;
border: 4px solid #f90;
margin: -102px 0 0 -202px;
display: none;
}
h2 {
font-size: 12px;
text-align: right;
background: #FC0;
border-bottom: 3px solid #f90;
padding: 0 2px;
}
h2 span {
color: #f90;
cursor: pointer;
background: #fff;
border: 1px solid #f90;
padding: 0 2px;
}
#win p {
text-align: justify;
text-indent: 2em;
}
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="d.css">
</head>
<body>
<div id="overlay"></div>
<div id="win">
<h2>标题栏<span id="close">*</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed nesciunt rem, harum aspernatur impedit atque eum nisi saepe unde, expedita sunt asperiores reprehenderit, pariatur molestiae temporibus voluptas deserunt ducimus veniam!
</p>
</div>
<center>
<button type="button">弹出层</button>
</center>
<script src="d.js"></script>
</body>
</html>