HTMl部分
弹窗背景(一般是全屏的 z-index和backgroundcolor)
弹窗容器(header、body、footer)
值得一提的是我们一般都会给元素类名和id
id用来获取元素类用来设置样式
CSS部分
通过animation xx 2s 配合@keyframes 来实现动画效果
@keyframes mymove
{
from {opacity:0;}
to {opacity:1;}
}
JavaScript部分
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";
}
function outsiteClick(e){
if (e.target == modal) {
modal.style.display = "none";
}
}