页面弹出模态框

一、样式css部分

#modal-overlay {
    
    
       visibility: hidden;    
       position: absolute;   /* 使用绝对定位或固定定位  */
       left: 0px;    
       top: 0px;
       width:100%;
       height:100%;
       text-align:center;
       z-index: 1000;
       background-color:ragb(51,51,51,.6); 
         /* 背景半透明 */
  }
  /* 模态框样式 */
  .modal-data{
    
    
    width:300px;
       margin: 100px auto;
       background-color: #fff;
       border:1px solid #000;
       padding:15px;
       text-align:center;
  }

二、html部分

 <a href="#" onclick="overlay()">点击此，进入兑换页面，弹出模态框</a>
 <div id="modal-overlay"> 
  <div class="modal-data">
     <p>这里是兑换弹出框 </p>
     <p>点击这个<a onclick="overlay()" href="">立即兑换</a> 后，这个弹出框关闭</p>
  </div>
 </div>

三、js部分

function overlay(){
    
    
    var a1 = document.getElementById('modal-overlay');
    a1.style.visibility = (a1.style.visibility == "visible")? "hidden" : "visible";
}