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