JavaScript 和 HTML 自定义警报框

Question

自定义警告框

我试图为我的网站做一个"自定义警报框"。下面是关于警报框的脚本和样式的链接代码

<style>
.verdana {
font-family: Verdana;
}

.modal__overlay {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000000000000000;
}

.modal__window {
max-width: 500px;
background: #ffffff;
border: 1px solid #ffffff;
font-size: 16px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}

.modal__titlebar {
height: 40px;
background: #333333;
display: flex;
align-items: center;
justify-content: space-between;
}

.modal__title {
margin-left: 15px;
font-weight: bold;
color: #eeeeee;
}

.modal__close {
width: 40px;
height: 40px;
outline: none;
border: none;
background: transparent;
color: #eeeeee;
cursor: pointer;
}

.modal__close:active {
transform: scale(0.9);
}

.modal__content {
padding: 15px;
font-size: 0.9em;
}
</style>
<script>
function alert(title, content) {
var alertContent = `<div class="modal__overlay verdana">
<div class="modal__window">
<div class="modal__titlebar">
<span class="modal__title">
` + title + `
</span>                        
<button class="modal__close">X</button>                    
</div>                     
<div class="modal__content">` + content + `
</div>
</div>
</div>`
var dialogBox = document.createElement("div");
dialogBox.innerHTML = alertContent;
}
alert("dialog", "box")
</script>

如你所见，你什么也看不见。修复吗?我从YouTube视频上找到了这个设计，但是这个机制不适用，所以我不得不自定义它。

我正在分析代码，但在javascript中没有发现错误。也许是在CSS

Answer 1

主要有两个问题:

1. 您正在创建对话框<div />，但您实际上没有将其附加到文档
2. 你定义了alert，但实际上你并没有在任何地方调用它

我在下面的代码片段中修复了这两件事:

function alert(title, content) {
var alertContent = `
<div class="modal__overlay verdana">
<div class="modal__window">
<div class="modal__titlebar">
<span class="modal__title">${title}</span>                        
<button class="modal__close">X</button>                    
</div>                     
<div class="modal__content">${content}</div>
</div>
</div>`
var dialogBox = document.createElement("div");
dialogBox.innerHTML = alertContent;
document.body.appendChild(dialogBox); // actually append it
}
alert('hello', 'hello world'); // call it here

.verdana {
font-family: Verdana;
}
.modal__overlay {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000000000000000000;
}
.modal__window {
max-width: 500px;
background: #ffffff;
border: 1px solid #ffffff;
font-size: 16px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
}
.modal__titlebar {
height: 40px;
background: #333333;
display: flex;
align-items: center;
justify-content: space-between;
}
.modal__title {
margin-left: 15px;
font-weight: bold;
color: #eeeeee;
}
.modal__close {
width: 40px;
height: 40px;
outline: none;
border: none;
background: transparent;
color: #eeeeee;
cursor: pointer;
}
.modal__close:active {
transform: scale(0.9);
}
.modal__content {
padding: 15px;
font-size: 0.9em;
}

需要考虑的另外两件事:

1. 在使用模板字面值时不需要使用字符串连接;你可以简单地嵌入表达式
2. Window.alert是一个预定义的函数，您可能会与自己的函数隐藏;我建议给它一个不同的名字。