暫停文檔 - HTML，CSS，JavaScript

Question

我正在製作典型JS'alert（）'框的樣式化HTML版本。

這只是一個很好的使用'display：none'和'display：block'切換框。

但是，這並沒有一個JS「警報（）」的功能框，因爲這樣做

for(var c = 0; c < 10; c++){ //like the joke? (c++) 
    cool.alert('You have seen '+c+' alerts'); 
} 

不會創造連續10個警告框，但使框的顯示「塊」 10倍。

是否有任何方法暫停文檔，直到警告框關閉，以便循環會暫停？

這裏的所有相關代碼：

<button onclick="cool.alert('Hi')">Alert box</button><div id='block'></div> 
 
<div id='box'> 
 
\t <p id='text'></p><hr id='hr'> 
 
    <div id='Ok' onclick='cool.alertclear()'>Ok</div> 
 
</div> 
 
<script> 
 
var cover = document.getElementById('block'); 
 
var box = document.getElementById('box'); 
 
var text = document.getElementById('text'); 
 
var ok = document.getElementById('Ok'); 
 
var hr = document.getElementById('hr'); 
 
var cool = { 
 
    alert: function(input){ 
 
    \t cover.style.display = 'block'; 
 
     box.style.display = 'block'; 
 
     ok.style.display = 'block'; 
 
     text.innerHTML = input; 
 
    }, 
 
    alertclear: function(){ 
 
    \t cover.style.display = 'none'; 
 
     box.style.display = 'none'; 
 
     ok.style.display = 'none'; 
 
    } 
 
} 
 
</script> 
 
<style> 
 
#block{ 
 
\t position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(0,0,0,0.6); 
 
    display: none; 
 
    z-index: 100; 
 
} 
 
#box{ 
 
\t position: absolute; 
 
    top: 25%; 
 
    left: 35%; 
 
    height: 30%; 
 
    width: 30%; 
 
    border-radius: 10px; 
 
    background: rgba(255,255,255,0.8); 
 
    box-shadow: 0 0 50px rgba(0,0,0,0.2); 
 
    display: none; 
 
\t z-index: 101; 
 
    color: #000; 
 
    padding: 10px; 
 
    cursor: default; 
 
} 
 
#text{ 
 
\t height: 60%; 
 
    word-break: break-all; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
} 
 
#Yes{ 
 
\t position: absolute; 
 
    bottom: 5%; 
 
    right: 25%; 
 
    height: 15%; 
 
    width: 18%; 
 
    border-radius: 5px; 
 
    background: linear-gradient(left top, #00FF00, #00DD00); 
 
    background: -webkit-linear-gradient(left top, #00FF00, #00DD00); 
 
    cursor: hand; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
    color: white; 
 
    display: none; 
 
} 
 
#No{ 
 
\t position: absolute; 
 
    bottom: 5%; 
 
    right: 5%; 
 
    height: 15%; 
 
    width: 18%; 
 
    border-radius: 5px; 
 
    background: linear-gradient(left top, #ff6c6c, #ff4e4e); 
 
    background: -webkit-linear-gradient(left top, #ff6c6c, #ff4e4e); 
 
    cursor: hand; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
    color: white; 
 
    display: none; 
 
} 
 
#Ok, #Go{ 
 
\t position: absolute; 
 
    bottom: 5%; 
 
    right: 5%; 
 
    height: 15%; 
 
    width: 18%; 
 
    border-radius: 5px; 
 
    background: grey; 
 
    cursor: hand; 
 
    text-align: center; 
 
    font-size: 1.5em; 
 
    color: white; 
 
    display: none; 
 
} 
 
#Prompt{ 
 
\t position: absolute; 
 
    top: 30%; 
 
    left: 5%; 
 
    height: 40%; 
 
    width: 90%; 
 
    resize: none; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    word-break: break-all; 
 
    display: none; 
 
} 
 
#hr{ 
 
\t position: relative; 
 
    bottom: 0%; 
 
} 
 
</style>

Answer 1

你可以跟蹤警報的是這樣的：

var inputArr = []; 
var showing = false; 
var cool = { 
    alert: function(input){ 
     if(!showing) { 
      cool.show(input); 
      showing = true; 
     } else { 
      inputArr.push(input); 
     } 
    }, 
    alertclear: function(){ 
     cover.style.display = 'none'; 
     box.style.display = 'none'; 
     ok.style.display = 'none'; 
     if(inputArr.length>0) { 
      input = inputArr.shift(); 
      cool.show(input); 
     } else { 
      showing = false; 
     } 
    }, 
    show: function(input) { 
     cover.style.display = 'block'; 
     box.style.display = 'block'; 
     ok.style.display = 'block'; 
     text.innerHTML = input; 
    } 
}