Html 模态框操作

<style>
 #modal-overlay {
		     visibility: hidden;    
		     position: absolute;   /* 使用绝对定位或固定定位  */
		     left: 0px;    
		     top: 0px;
		     width:50%;
		     height:26%;
		     text-align:center;
		     z-index: 1000;
		     background-color: #333; 
		     opacity: 1;   /* 背景半透明 */
             margin-top: 10%;
             margin-left: 25%;
		}
		/* 模态框样式 */
		.modal-data{
			 width:100%;
             height:100%;
		     /*margin: 100px auto;*/
		     background-color: #fff;
		     border:1px solid #000;
		     padding:15px;
		     text-align:center;
		}
</style>
<script>
 function overlay() {
        var e1 = document.getElementById('modal-overlay');
        e1.style.visibility = (e1.style.visibility == "visible") ? "hidden" : "visible";
    }
</script>

<div id="modal-overlay">
        <div class="modal-data">
           <p>这是一个简单的模态框</p>
           <p>
              <a href="Javascript: void(0)" onclick="overlay">关闭模态框</a>
           </p>
           
        </div>
    </div>

欢迎评论。。。。让我看到你的反馈。。。。