1. 程式人生 > >添加遮罩彈窗

添加遮罩彈窗

mask func .sh back spl none align padding round

添加遮罩彈窗

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>

添加遮罩彈窗