JS实现弹窗效果，超简单哦

效果演示

代码如下

HTML

点我弹窗

CSS

/* 遮罩层 */.modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);z-index: 1;}/* 弹窗 */.modal-content {position: fixed;top: 15%;left: 50%;margin-left: -25%;width: 45%;height: 70%;min-width: 31.125rem;min-height: 18.625rem;border-radius: .125rem;background-color: white;z-index: 2;}.modal-body {position: relative;width: 100%;height: 100%;}.mb_revise {padding: .625rem 0 0 1.5625rem;}.mb_revise>p {padding-left: .25rem;margin-top: .125rem;font-family: &＃39;FangSong&＃39;, Times, serif;font-size: 15px;border-left: solid .125rem royalblue;}/* 确定和取消 */.determine,.cancen {position: absolute;width: 3.625rem;height: 2.1875rem;color: #fff;border: 0;outline: none;box-shadow: 0 .125rem .125rem rgb(107, 96, 96);cursor: pointer;}.determine {right: 6.5rem;bottom: .725rem;background-color: rgba(9, 139, 245, 0.788);}.cancen {right: 2rem;bottom: .725rem;background-color: rgba(212, 37, 37, 0.788);}.determine:hover,.cancen:hover {color: #fff;box-shadow: 0 .134rem .1275rem rgb(58, 57, 57);}.determine:active,.cancen:active {box-shadow: 0 .134rem .1275rem rgba(230, 227, 227, .758);}


JS

// 打开弹窗var button &＃61; document.getElementById("js_show");button.onclick &＃61; function(){var modal &＃61; document.querySelector(".modal");modal.style.display &＃61; "block";}// 点击取消 关闭弹窗var cancen &＃61; document.querySelector(".cancen");cancen.onclick &＃61; function(){var modal &＃61; document.querySelector(".modal");modal.style.display &＃61; "none";}