JavaScript & HTML Custom Alert Box

Question

Custom Alert Box

I was trying to make a "Custom Alert Box" for my website. the linked code about the scripting and styling of the alert box is below

<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>

As you can see You do not see anything. Any fix? I found the design from YouTube Video but the mechanism doesn't apply so I had to customize it.

I was analyzing the code but found no error in the javascript. perhaps it is in the CSS

Answer 1

There were two main problems:

1. You were creating the dialog <div /> but you weren't actually appending it to the document
2. You were defining alert but you weren't actually calling it anywhere

I've fixed these two things in the below snippet:

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;
}

Two other things to consider:

1. You don't need to use string concatenation when using template literals; you can simply embed the expression
2. Window.alert is a predefined function which you are potentially shadowing with your own function; I'd recommend giving it a different name.