<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹框</title>
<script src="jquery-9.2.js"></script>
<style>
/*背景层*/
#popLayer {
display: none;
background-color: #000;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
opacity:0.6;
}
/*弹出层*/
#popBox {
display: none;
background-color: #FFFFFF;
z-index: 11;
width: 300px;
height: 300px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
/*关闭按钮*/
#popBox .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
#popBox .close a {
text-decoration: none;
color: #2D2C3B;
}
</style>
</head>
<body>
<input type="button" name="popBox" value="弹出框" 0nclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
<div class="close">
<a href="javascript:void(0)" 0nclick="closeBox()">关闭</a>
</div>
<div class="content">hi im here!</div>
</div>
<script>
/*点击弹出按钮*/
function popBox() {
var popBox = document.getElementById("popBox");
var popLayer = document.getElementById("popLayer");
popBox.style.display = "block";
popLayer.style.display = "block";
};
/*点击关闭按钮*/
function closeBox() {
var popBox = document.getElementById("popBox");
var popLayer = document.getElementById("popLayer");
popBox.style.display = "none";
popLayer.style.display = "none";
}
</script>
</body>
</html>