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 上找到了设计 Video但该机制不适用，所以我不得不对其进行自定义。

我正在分析代码，但在 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. 使用template literals 时不需要使用字符串连接;你可以简单地嵌入表达式
2. Window.alert是一个预定义的函数，您可能会用自己的函数隐藏它；我建议给它一个不同的名字。