使用html、css、js制作一个简单且草率的弹出提示框

        对于刚接触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：本篇为纯新手打造，恳请大佬多多批评）