應用html、css、js實現自定義彈窗效果

HTMl部分
首先要有一個觸發事件的按鈕
彈窗背景（一般是全屏的 z-index和backgroundcolor）
彈窗容器（header、body、footer）
值得一提的是我們一般都會給元素類名和id
id用來獲取元素類用來設置樣式
CSS部分
首先設置好相應的樣式
通過animation xx 2s 配合@keyframes 來實現動畫效果
JavaScript部分
// 獲取彈窗元素 通過js控制css使它隱藏或顯示
var modal = document.getElementById("simpleModal");

// 獲取按鈕元素
var modalBtn = document.getElementById("modalBtn");

// 獲取關閉彈窗按鈕元素
var closeBtn = document.getElementsByClassName('closeBtn')[0];

// 監聽打開彈窗事件 值得一提的是監聽命令和jQuery的on很相像
modalBtn.addEventListener("click",openModal);

// 監聽關閉彈窗事件
closeBtn.addEventListener("click",closeModal);

// 監聽window關閉彈窗 這里為了實現 點擊彈窗外部實現關閉
window.addEventListener("click",outsiteClick);

// 彈窗事件
function openModal(){
modal.style.display = "block";
}

// 關閉彈窗
function closeModal(){
modal.style.display = "none";
}

// outsiteClick
function outsiteClick(e){
if (e.target == modal) {
modal.style.display = "none";
}
}