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!');
}