对于刚接触html5和css3的新手来说，alert弹出窗弊端不仅会阻止程序的执行，并且看起来十分简陋，不美观，视觉效果和实用性都不好，所以今天我将为大家展示：如何使用html和css、js制作一个简单的弹出窗。
首先是html结构，一个弹窗，一个按钮
<div class="window_bg"> <!-- 弹窗内容 --> <div class="window_content"> <p id="window_text">弹窗的内容....</p> <div class="btnBox"> <div style="border-right: 1px solid;" onclick="isNo()">否</div> <div onclick="isYes()">是</div> </div> </div> </div> <button type="button" onclick="show()">显示弹窗</button>
然后是css，设置背景，弹窗样式
/* 暗色背景 */ .window_bg{ /* 默认隐藏 */ display: none; /* 固定定位 */ position: fixed; /* 设置层级 */ z-index: 1; /* 背景铺满全屏 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); } .window_content { background-color: #fefefe; margin: 15% auto; padding: 20px; border: 1px solid #888; width: 40%; } #window_text { padding: 20px; height: 30px; } .btnBox { width: 100%; height: 30%; border-top: 1px solid; display: flex; } .btnBox>div { width: 50%; display: flex; justify-content: center; align-items: center; }
呈现的结果大致就是这样啦（可以依个人需求随意调整弹窗样式）：
最后是js
//获取弹窗 let window_bg = document.getElementsByClassName("window_bg")[0] // “否”按钮 function isNo() { window_bg.style.display = "none" } // “是”按钮 function isYes(){ window_bg.style.display = "none" //可根据需要调整事件 window.location.href = "./login.html" } //点击弹窗外部可隐藏弹窗 window.onclick = function(event){ if(event.target == window_bg){ event.target.style.display = "none" } } // 点击按钮显示弹窗 function show(){ window_bg.style.display = "block" }
根据个人需要可调整弹窗的事件
（ps：本篇为纯新手打造，恳请大佬多多批评）
