alert like function in javascript

Question

I want to create a modal popup in javascript.
But my requirement is whenever the popup open, it will stop executing next javascript lines until it is closed.

for eg.

var bool = false;
DisplayModal("Show Message");
bool = true;
alert("alerted only after closing the pop up : bool = true");
bool = false;

So until I close the modal popup of "Show Message" bool would not be true. and when I close popup then remaining script will be run as in order after DisplayModal ...

Similarly like alert but I do not want to override alert ..

I need some help, Thanks in advance...

Edit :

Try to explain a bit more..

I want to stop execution when DisplayModal called
Stop execution
after then Pop-up shows
after the pop-up closed continue from next line (means : bool = true; ... )

Answer 1

If you want to customize the appearance of the dialog, you can use jQuery's dialog widget. It supports events. I've made a simple example: http://jsfiddle.net/5CBdm/

You can attach an event handler to the close event of the dialog and put the rest of the code inside the event handler.

The required HTML:

<div id="dialog-modal" title="Modal dialog">
    <p>Message</p>
</div>

And the corresponding Javascript:

$("#dialog-modal").dialog({
    height: 140,
    modal: true,
    close: function (event, ui) {
        alert("Executed when the dialog is closed.");
    }    
});

Links to the dialog:

http://jqueryui.com/dialog/#modal

http://api.jqueryui.com/dialog/#event-close

Answer 2

You can use jQuery plugin. For example http://dimsemenov.com/plugins/magnific-popup/

Or you can make it by yourself (try it on jsfiddle: http://jsfiddle.net/T2Vn3/ ):

<div class="overlay">
    <div class="alert">
        This is alert!
        <br/>
        <button>OK</button>
    </div>
</div>

<button class="forAlert">Click me!</button>

JS:

document.querySelector('.alert button').addEventListener('click', function () {
    document.querySelector('.overlay').style.display = 'none';
}, false);

document.querySelector('.forAlert').addEventListener('click', function () {
    document.querySelector('.overlay').style.display = 'block';
});

Answer 3

Sounds like a job for confirm

(function() {
var result = confirm("I'm Happy?");
alert(result ? "Yes, I'm happy" : "No, I'm not happy");
}());

Confirm will block the current thread of execution until a result is returned

Answer 4

alert, prompt, confirm and XMLHTTPRequest are the only synchronous functions in JavaScript. You have to use events and callbacks.

If you want the user not to be able to do anything until he closes your popup, you can make a transparent div recovering all the page (except your popup ...).