Javascript 自定义警报框一次只显示一个警报

Question

根据我的要求，我在 Javascript 中创建了一个自定义警报消息框。问题是当我在我的用户定义的 function 中调用两个警报时，只有一个警报出现。

我的要求是它必须像现有的警报一样工作。 这意味着，我们应该显示多少警报；

找到示例代码并帮助我：

 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();" />

Answer 1

window.alert（默认）将阻止用户访问程序界面的 rest，直到对话框关闭。 所有 javascript 也将被阻止。 当对话框关闭后，js继续运行。

您将默认警报替换为 js function，它将继续运行两个警报 function。 如果你想阻止第一个警报方法，你应该使用异步等待。

代码如下：

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

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

更改 ful function

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