Я создаю стандартную версию HTML типичного JS 'alert()'.Приостановить документ - HTML, CSS, JavaScript
Это просто приятно использовать '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>
** Примечание: ** Я не хочу setTimeout – Tobsta
Если вы хотите использовать jquery, можете использовать .promise(). done –
@MoisheLipsker, не могли бы вы объяснить более подробно? Где я могу поставить jQuery? Я бы положил его в функцию cool.alert()? И что я ставлю на конец? $ (документ)? – Tobsta