首先是html的結(jié)構(gòu)，一個大的盒子用來做模糊的背景帆谍，其中的小盒子用來做模態(tài)框。
模態(tài)框.png
<div id="modal-overlay"> <div class="modal-data"> <p>一個很簡單的模態(tài)對話框 </p> <p>點擊<a onclick="overlay()" href="">這里</a>關(guān)閉</p> </div> </div>接下來是css部分轴咱，
#modal-overlay { visibility: hidden;/*控制模態(tài)框的顯示*/ position: absolute; /* 使用絕對定位或固定定位 */ left: 0px; top: 0px; width:100%;/*讓模糊的背景全屏顯示*/ height:100%; text-align:center;/*模態(tài)框主體居中顯示*/ z-index: 1000;/*大盒子強制在頁面最上方*/ background-color: #333; opacity: 0.5; /* 背景半透明 */ } /* 模態(tài)框樣式 */ .modal-data{ width:300px; margin: 100px auto; background-color: #fff; border:1px solid #000; padding:15px; text-align:center;/* 內(nèi)部文字居中顯示*/ }最后是js部分汛蝙，
function overlay(){ var e1 = document.getElementById('modal-overlay'); e1.style.visibility = (e1.style.visibility == "visible" ) ? "hidden" : "visible"; }
