javascript - 暂停文档 - HTML、CSS、JavaScript

Question

我正在制作典型 JS“alert()”框的样式化 HTML 版本。

使用'display: none;'简直是一个不错的选择和“显示: block ；”切换框。

但是，它没有 JS 的“alert()”框的功能，就像做的那样

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'>
	<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){
    	cover.style.display = 'block';
        box.style.display = 'block';
        ok.style.display = 'block';
        text.innerHTML = input;
    },
    alertclear: function(){
    	cover.style.display = 'none';
        box.style.display = 'none';
        ok.style.display = 'none';
    }
}
</script>
<style>
#block{
	position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    z-index: 100;
}
#box{
	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;
	z-index: 101;
    color: #000;
    padding: 10px;
    cursor: default;
}
#text{
	height: 60%;
    word-break: break-all;
    overflow-x: hidden;
    overflow-y: auto;
}
#Yes{
	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{
	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{
	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{
	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{
	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;
    }
}