核心提示：前端代码实现简易弹出框!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDocument/titlestyle#mask{background-c...
前端代码实现简易弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#mask{
background-color: #000;
opacity: 0.75;
height: 3000px;
width: 100%;
position: absolute;
left: 0;
top: 0;
z-index: 1000;
}
#login{
position: fixed;
top:200px;
left:50%;
margin-left:-335px;
z-index:1001;
}
.loginCon {
width: 670px;
height: 380px;
background: url(img/loginbg.png) no-repeat;
/* position: relative;
margin:auto;*/
}
.close {
width: 30px;
height: 30px;
background: url(img/close.png) no-repeat;
cursor: pointer;
position: absolute;
right:0;
top:0;
}
</style>
</head>
<body>
<p style="width: 100%;height: 3000px;background-color: pink;">
<p id="mask">
<p id="login">
<p class="loginCon">
<p class="close"></p>
</p>
</p>
</p>
</p>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(".close").click(function(){
$("#mask").hide();
})
</script>
</body>
</html>
