添加遮罩弹窗

Posted 2020-10-15 bagnliu

添加遮罩弹窗

css:

<style>
#headul{
　　width: 100%;
　　height: 100%;
　　position: absolute;
　　top:0;
　　left: 0;
　　display: none;
}
.mask{
　　width: 100%;
　　height: 100%;
　　background: rgba(0,0,0,0.6);
　　z-index: 9999;
}
.mask_content{
　　width: 450px;
　　height: 260px;
　　background-color: #fff;
　　border-radius: 10px;
　　position: absolute;
　　top: 50%;
　　left: 50%;
　　margin-top: -150px;
　　margin-left: -250px;
　　z-index: 99999;
　　padding: 0px;
　　text-align: center;
}
.mask_content h2{
　　color: #da251c;
　　font-size: 40px;
}
.mask_content a{
　　margin-top: 30px;
　　display: block;
　　width: 300px;
　　height: 70px;
　　line-height: 70px;
　　background-color: #da251c;
　　color: #fff;
　　text-decoration: none;

}
</style>

html:

<div class="headul" id="headul">
　　<div class="mask"></div>
　　<div  class="mask_content">
　　　　<h2>恭喜您，激活成功!</h2>
　　　　<a href="#">下一步</a>
　　</div>
</div>

js:

 

<script>
　　$(function(){
　　　　$("#aaa").click(function(){
　　　　　　$("#headul").show();
　　　　})
　　})
</script>