用HTML、CSS和JavaScript创建弹窗效果

HTMl部分

• 首先要有一个触发事件的按钮

弹窗背景（一般是全屏的 z-index和backgroundcolor）
弹窗容器（header、body、footer）
值得一提的是我们一般都会给元素类名和id
id用来获取元素类用来设置样式

CSS部分

• 首先设置好相应的样式

通过animation xx 2s 配合@keyframes 来实现动画效果

@keyframes mymove
{
from {opacity:0;}
to {opacity:1;}
}

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";
    }
}