as per my requirement, I have created a custom alert message box in Javascript. The problem is when i am calling two alerts in my user defined function, only one alert is coming.

my requirement is it has to be work as like the existing ALERT. which means, how many alerts we are giving that should show;

find the sample code and help me out:

var ALERT_TITLE = "This is Title Header!";
var ALERT_BUTTON_TEXT = "Ok";

if(document.getElementById) {
    window.alert = function(txt) {
        createCustomAlert(txt);
    }
}

function createCustomAlert(txt) {
    d = document;

    if(d.getElementById("modalContainer")) return;

    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
    mObj.id = "modalContainer";
    mObj.style.height = d.documentElement.scrollHeight   "px";
    
    alertObj = mObj.appendChild(d.createElement("div"));
    alertObj.id = "alertBox";
    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop   "px";
    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2   "px";
    alertObj.style.visiblity="visible";

    h1 = alertObj.appendChild(d.createElement("h1"));
    h1.appendChild(d.createTextNode(ALERT_TITLE));

    msg = alertObj.appendChild(d.createElement("p"));
    //msg.appendChild(d.createTextNode(txt));
    msg.innerHTML = txt;

    btn = alertObj.appendChild(d.createElement("a"));
    btn.id = "closeBtn";
    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));
    btn.href = "#";
    btn.focus();
    btn.onclick = function() { removeCustomAlert();return false; }

    alertObj.style.display = "block";
    
}

function removeCustomAlert() {
    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));
}
function ful(){
alert('First Alert!');
alert('second Alert!');
}

body{
font-family: arial;
}
#modalContainer {
    background-color:rgba(0, 0, 0, 0.3);
    position:absolute;
  top:0;
    width:100%;
    height:100%;
    left:0px;
    z-index:10000;
    background-image:url(tp.png); /* required by MSIE to prevent actions on lower z-index elements */
}

#alertBox {
    position:relative;
    width:33%;
    min-height:100px;
  max-height:400px;
    margin-top:50px;
    border:1px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
  top:30%;
}

#modalContainer > #alertBox {
    position:fixed;
}

#alertBox h1 {
    margin:0;
    font:bold 1em Raleway,arial;
    background-color:#0279b3;
    color:#FFF;
    border-bottom:1px solid #0279b3;
    padding:10px 0 10px 5px;
}

#alertBox p {
    height:50px;
    padding-left:5px;
  padding-top:30px;
  text-align:center;
  vertical-align:middle;
}

#alertBox #closeBtn {
    display:block;
    position:relative;
    margin:10px auto 10px auto;
    padding:7px;
    border:0 none;
    width:70px;
    text-transform:uppercase;
    text-align:center;
    color:#FFF;
    background-color:#0279b3;
    border-radius: 0px;
    text-decoration:none;
  outline:0!important;
  float: right;
}
#alertBox #closeBtn:hover {
    background-color:#a3a3a3;
    color: #0279b3;
}

/* unrelated styles */

#mContainer {
    position:relative;
    width:600px;
    margin:auto;
    padding:5px;
    border-top:2px solid #fff;
    border-bottom:2px solid #fff;
}

h1,h2 {
    margin:0;
    padding:4px;
}

code {
    font-size:1.2em;
    color:#069;
}

#credits {
    position:relative;
    margin:25px auto 0px auto;
    width:350px; 
    font:0.7em verdana;
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    height:90px;
    padding-top:4px;
}

#credits img {
    float:left;
    margin:5px 10px 5px 0px;
    border:1px solid #000000;
    width:80px;
    height:79px;
}

.important {
    background-color:#F5FCC8;
    padding:2px;

}

@media (max-width: 600px) 
{
  #alertBox {
    position:relative;
    width:90%;
  top:30%;
}

<input type="button" value = "Test the alert" onclick="ful();" />

CodePudding user response：

window.alert (default) will prevent the user from accessing the rest of the program's interface until the dialog box is closed. all javascript will be blocked too. when the dialog box is closed, then js continue run.

you replace the default alert to js function, it will run two alert function continuely. if you want to block first alert method, you should use async await.

code like below:

if(document.getElementById) {
    window.alert = async function(txt) { // change method to async
       await createCustomAlert(txt);
    }
}

change createCustomAlert function

async function createCustomAlert(txt) {
   ...
    /* if(d.getElementById("modalContainer")) return; */ // youshould comment out it. otherwise the second alert will directly return.
...
   // add promise to listen on btn click event.
    let promise = new Promise((resolve, reject) => {
      btn.addEventListener('click', resolve)
    })
    return promise;
}

change the ful function

async function ful(){
 await alert('First Alert!'); // waiting for alert dialog close.
 await alert('second Alert!');
}