1. html 部分:
<div class="signWrap">
<div class="sign">
<a class="signClose" href="javascript:showSign();">点击关闭</a>
<p class="signTitle">预约报名</p>
<div class="signInput">
<input type="text" name="" placeholder="请输入姓名">
<input type="text" name="" placeholder="请输入手机号">
</div>
<p class="signPhone">报名热线:400-100-9891</p>
<a class="signBtn" href="javascript:;">立即报名</a>
<a class="signBtn zxkf" href="javascript:;">咨询客服</a>
</div>
</div>
<a href="javascript:showSign();" style="display: block;width: 200px;height:40px;color: #fff;background: lightblue;text-align: center;line-height: 40px;margin:0 auto;">点击弹出弹框</a>
2. css 部分:
.signWrap {
display: none;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
width: 750/75rem;
height: 100%;
background: rgba(0,0,0,0.2);
}
.sign {
position: absolute;
left: 50%;
top: 50%;
width: 700/75rem;
height: 1100/75rem;
margin: -1100/2/75rem 0 0 -700/2/75rem;
background: #fff;
}
3. js部分:
function showSign(){
$(".signWrap").toggle();
}