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) {
  ...
});

友情链接