知道嗎，網頁開發時經常使用的各種框架里的模態框原來只用幾行代碼就可以輕松實現相同的效果。操練起來吧。

一、原理：

1. 將背景鋪滿屏幕，在背景上添加內容，設置背景為最外層，隱藏
2. 觸發，將隱藏設置為可見
3. 關閉時將可見設置為隱藏

二、CSS部分

.modal-dialog {

visibility: hidden; //設置不可見

position: fixed;

left: 0px;

top: 0px;

width:100%;

height:100%;

text-align:center;

z-index: 1000; //設置在最上層

background-color:rgba(3,3,3,0.8);//設置背景顏色和透明度

}

三、JavaScript部分

function modal(id){

var e1=document.getElementById(id);

e1.style.visibility=(e1.style.visibility=="visible")?"hidden":"visible"

}

值得注意的是，如果使用點擊背景關閉，需要阻止內部的事件冒泡

//阻止冒泡事件傳播到背景層

function stopBubble(e){

console.log(e);if(e&&e.stopPropagation){

e.stopPropagation()

}else{

window.event.cancelBubble=true

}

};

四、html部分

<button onclick="modal('mo')">觸發模態框</button>

<div class="modal-dialog" id="mo" onclick="modal('mo')"> //點擊背景層進行關閉

<div style="width:500px;height:350px;background:white;margin:100px auto;" onclick="stopBubble(e)">

這是模態框

</div>

</div>

五、效果

下期我們將對此次簡陋的模態框進行改造，成為可拖動的模態框。如果您喜歡我們的分享，歡迎進行轉發收藏。

我們是小猿工作室，專注技術、高效生活的年輕人，點擊關注可以獲取更多高效、好玩的技能哦。