jQuery UI modal dialog not blocking

Question

I am new to javascript and jQuery. I am trying to implement a modal dialog using jQuery UI widgets.

The modal dialog shows up correctly with OK and Cancel buttons, but the dialog('open') function call does not seem to block and wait for an OK or Cancel click. For example, when I run the following code

.....on button click

  okToDelete = false; //a global variable
  $('deleteDialog').dialog('open'); //this does not block but returns immediately
  alert(okToDelete == true ? "ok" : "false");

The alert box is displayed first and THEN the modal dialog shows up! okToDelete is a global variable I set to false when I enter the function and set to true in the OK button callback.

Here is my dialog init function

$("#deleteDialog").dialog({
        bgiframe: true,
        autoOpen: false,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            Cancel: function() {
                $(this).dialog('close');

            },
            Ok: function() {
                $(this).dialog('close');
                okToDelete = true;
            }
        }
    });

Answer 1

It is not meant to 'block'. If you want to display the alert (I assume that's for testing) or call other functions after the dialog closes, if you to place it within the callback or the ok, cancel functions.

Check this out:
http://docs.jquery.com/UI/Dialog#event-close

The event close from the docs:
This event is triggered when the dialog is closed.
Code examples

Supply a callback function to handle the close event as an init option.

$('.selector').dialog({
   close: function(event, ui) { ... }
});

Bind to the close event by type: dialogclose.

$('.selector').bind('dialogclose', function(event, ui) {
  ...
});