用js自定义弹窗
代码如下：
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>Title</title> <!--定义弹窗的样式--> <style> .popup { width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, .5); position: fixed; left: 0; top: 0; bottom: 0; right: 0; display: none; justify-content: center; align-items: center; } .popup-content { width: 400px; height: 200px; background-color: #fff; box-sizing: border-box; padding: 10px 30px; color: black; } .top { width: 100%; border-bottom: 1px solid black; } .info { margin-top: 50px; } </style> <script> //给定一个值,使点确定为true,点其他为false var isDelete = false; function showPopup() { document.getElementById("popup").style.display = "flex"; } // 传一个参数，把true和false传进去 function hidePopup(x, e) { //处理冒泡 //event 的 cancelable 事件返回一个布尔值 。 // 如果返回的是undefined，则是除确定以外的区域，反之是确定按钮（因为取消和其他区域，没传值默认undefined） if (e != undefined) { e.cancelBubble = true; } document.getElementById("popup").style.display = "none"; isDelete = x; console.log(x); } </script> </head> <body> <!--给定一个按钮来显示弹窗--> <button type="button" onclick="showPopup()">弹窗</button> <!--给出弹窗的内容--> <!--弹窗点击除确定以外的取消和其他区域时弹窗都会消失且输出false，点击确定时为true--> <div class="popup" id="popup" onclick="hidePopup(false)"> <div class="popup-content"> <div class="top"> <p>提示信息</p> </div> <div class="info"> <p>确认关闭？</p> </div> <div class="btn"> <!--因为两个按钮在popup这个大框里，点击确定和取消就会同时点击父元素， 会产生事件冒泡（即点击确定，会同时出现true和false）--> <button type="button" onclick="hidePopup(true,event)">确定</button> <button type="button" onclick="hidePopup(false)">取消</button> </div> </div> </div> </div> </body> </html>
来源：博客园
作者：此间的我
链接：https://www.cnblogs.com/here-I-am/p/11453180.html