Pause a document - HTML, CSS, JavaScript

Vote count:

0

I am making a styled HTML version of the typical JS 'alert()' box.

It is simply a nice that uses 'display: none;' and 'display: block;' to toggle the box.

However, this doesn't have the functionality of a JS 'alert()' box, as doing

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

will not create 10 successive alert boxes, but make the box's display 'block' 10 times.

Is there any way to pause the document until the alert box is closed so that the loop would be paused?

Here's all the relevant code:

<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>

asked 53 secs ago

Tobsta

40

Pause a document - HTML, CSS, JavaScript