JavaScript message boxes

example:

Codes:
          <button class="btn">display message box</button>
          <style>
            .btn{display: block; height: 4vh; width: 20vw; font-size: 1vw;top:0; padding:0.1vw;}
            .msgBox {position: absolute;top: 50%; left: 20%; transform: translate(-50%,-50%); 
              width: 20vw; background: deepskyBlue;}
            .msgBox p {line-height: 1.5; padding: 1vw 2vw; color: #333;}
            .msgBox button {background: none;  border: none; position: absolute; top: 0; 
              right: 0; font-size: 1.1vw; color: orangered;}
          </style>
          <script>
            const btn = document.querySelector('.btn');
            btn.onclick = function(){
              displayMessage('Woo, this is a different message!');
            };
            function displayMessage(msgText, msgType) {
                const html = document.querySelector('html');
                const panel = document.createElement('div');
                panel.setAttribute('class', 'msgBox');
                html.appendChild(panel);
                const msg = document.createElement('p');
                msg.textContent = msgText;
                panel.appendChild(msg);
                const closeBtn = document.createElement('button');
                closeBtn.textContent = 'x';
                panel.appendChild(closeBtn);
                closeBtn.onclick = function() {
                    panel.parentNode.removeChild(panel);
                }
            }
          </script>

example:

click on the "x" symbol to close the alert message.

× Danger! Indicates a dangerous or potentially negative action.

× Success! Indicates a successful or positive action.

× Info! Indicates a neutral informative change or action.

× Warning! Indicates a warning that might need attention.

Codes:
                <div class="container">
                  <p>click on the "x" symbol to close the alert message.</p>
                  <div class="alert">
                    <span class="closebtn">×</span>  
                    <strong>Danger!</strong> Indicates a dangerous or potentially negative action.
                  </div>
                  
                  <div class="alert success">
                    <span class="closebtn">×</span>  
                    <strong>Success!</strong> Indicates a successful or positive action.
                  </div>
                  
                  <div class="alert info">
                    <span class="closebtn">×</span>  
                    <strong>Info!</strong> Indicates a neutral informative change or action.
                  </div>
                  
                  <div class="alert warning">
                    <span class="closebtn">×</span>  
                    <strong>Warning!</strong> Indicates a warning that might need attention.
                  </div>
              </div>
              <style>
                .container{display: flex; flex-flow: column; margin-left: 5vw; width: 30vw; height:auto;}
                .alert { padding: 2vw;  background-color: #f44336; color: white; opacity: 1; transition: 
                  opacity 0.6s; margin-bottom: 1.5vw;}
                .alert.success {background-color: #04AA6D;}
                .alert.info {background-color: #2196F3;}
                .alert.warning {background-color: #ff9800;}
                .closebtn {margin-left: 1.5vw;color: white; font-weight: bold; float: right; font-size: 
                  2vw; line-height: 1vw; cursor: pointer; transition: 0.3s;}
                .closebtn:hover {color: black;}
              </style>
              <script>
                  var close = document.getElementsByClassName("closebtn");
                  var i;
                  for (i = 0; i < close.length; i++) {
                      close[i].onclick = function(){
                          var div = this.parentElement;
                          div.style.opacity = "0";
                          setTimeout(function(){ div.style.display = "none"; }, 600);
                      }
                  }
              </script>

example:

Here comes the popup

Codes:
                <div>
                    <div id="popUpOverlay"></div>
                    <div id="popUpBox">
                        <div id="box">
                          <i class="fas fa-check-circle fa-5x"></i>        
                          <h3>Here comes the popup</h3>
                          <div id="closeModal"></div>
                        </div>
                    </div>
                    <button onclick="Alert.render('You look very pretty today.')" class="btn2">show alert</button>
                </div>
                <style>
                      .btn2{position: relative;top: 20%;left: 30%;transform: translate(-20%, -20%); background: 
                        lightgreen; font-size: 2vw; color: blue; padding: 1vw 3vw; cursor: pointer;}
                      #popUpBox{ width: 20vw; overflow: hidden;background: lightgreen; box-shadow: 0 0 1vw black; 
                        border-radius: 1vw;  position: absolute; top: 310%; left: 20%; transform: translate(-50%, -50%);
                        z-index: 9999; padding: 1vw; text-align: center;display: none; }
                </style>
                <script>
                  var Alert = new CustomAlert();
                  function CustomAlert(){
                    this.render = function(){
                        let popUpBox = document.getElementById('popUpBox');
                        popUpBox.style.display = "block";
                        document.getElementById('closeModal').innerHTML = '<button style="cursor:pointer" 
                        onclick="Alert.ok()">OK</button>';
                    }
                    this.ok = function(){
                        document.getElementById('popUpBox').style.display = "none";
                        document.getElementById('popUpOverlay').style.display = "none";
                    }
                  }
                </script>

JavaScript - message boxes

Content

message box

alert messages

popup overlay

Here comes the popup