jQuery UI模式对话框没有阻塞

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

我是javascript和jQuery的新手。我正在尝试使用jQuery UI小部件实现模式对话框。

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.

首先显示警告框，然后显示模态对话框！ okToDelete是一个全局变量，当我输入函数并在OK按钮回调中设置为true时，我将其设置为false。

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

1 个解决方案

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

它并不意味着“阻止”。如果要显示警报（我假设是用于测试）或在对话框关闭后调用其他函数，如果要将其置于回调或ok中，则取消功能。

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

看看这个：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.

提供一个回调函数来处理close事件作为init选项。

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

Bind to the close event by type: dialogclose.

通过类型绑定到close事件：dialogclose。

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

#1