<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>弹窗</title>
<link rel="stylesheet" href="">
<script src='jQuery.js'></script>
<style>
.window{
display: none;
}
.active {
display: block;
}
.showModel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
background: rgba(0, 0, 0, .3);
filter: alpha(opacity=30); //兼容ie8
z-index: 999;
}
.inputbox {
width: 755px;
height: 425px;
margin: 0 auto;
text-align: center;
}
.mainBox {
margin: 0 auto;
text-align: center;
position: fixed;
z-index: 99999;
top: 200px;
filter: alpha(opacity=100);
}
.messBox {
background-color: #ffffff;
width: 755px;
height: 295px;
color: #ed6501;
font-size: 24px;
margin: 0 auto;
padding-top: 37px;
border-radius: 8px;
filter: alpha(opacity=100);
}
.box1 {
margin: 20px 0;
}
input {
width: 391px;
height: 32px;
border-radius: 10px;
background-color: #F4F4F4;
border: 1px solid #8C8C8C;
line-height: 32px;
font-size: 16px;
outline: none;
}
.tips {
text-align: justify;
width: 472px;
height: 50px;
color: #303030;
font-size: 20px;
margin: 0 auto;
margin-top: 30px;
line-height: 31px;
}
.commitBtn {
width: 76px;
height: 32px;
margin: 0 auto;
color: #FFF3CA;
font-size: 20px;
background-color: #ED6501;
border-radius: 6px;
line-height: 32px;
text-align: center;
margin-top: 30px;
cursor: pointer;
}
.receive{
width: 100px;
height: 60px;
background-color: red;
border: 1px solid blue;
color: #fff;
font-size: 20px;
margin: 0 auto;
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<div class="receive">
点我
</div>
<div class="window ">
<!--遮盖层-->
<div class="showModel"></div>
<!--弹窗主体-->
<div class="inputbox">
<div class="mainBox">
<div class="messBox">
<div class="box1">
<label>请输入您的手机号码:</label>
<input type="text" id="phone">
</div>
<div class="box2">
<label>请输入您的邮箱地址:</label>
<input type="text" id="email">
</div>
<div class="commitBtn">提交</div>
</div>
</div>
</div>
</div>
<script>
$(".receive").off().on('click',function(){
$(".window").addClass("active");
});
</script>
</body>
</html>