在jquery中创建确认对话框

时间:2012-06-02 17:55:13

标签: javascript jquery jquery-ui jquery-ui-dialog

$("#first").dialog({ width: 304, modal: true,

  beforeclose: function (e, ui) 
  {
        $("#confirm").dialog({ width: 500, modal: true,
            buttons: {
                "Confirm": function () {
                    document.location.href = "/Home/Index";
                },
                "Cancel": function () {
                    $(this).dialog('close');
                    return false;
                }
            }
        });
    }
});

对话框#first关闭,无需等待#confirm对话框打开。我知道javascript的confirm()功能,但我想在这种情况下使用对话框。我怎么能这样做?

2 个答案:

答案 0 :(得分:8)

来自fine manual

  

beforeClose(event,ui)

     

当对话框即将关闭时触发。如果取消,对话框将不会关闭。

因此,您希望beforeClose处理程序return false阻止对话框关闭:

beforeClose: function(e, ui) {
    $("#confirm").dialog({ width: 500, modal: true, /* ... */ });
    return false;
}

您的确认按钮会更改位置,因此您无需担心beforeClose处理程序会阻止第二个对话框关闭第一个对话框。如果您没有更改页面位置,那么您需要某种标记以防止beforeClose阻止所有关闭;像这样的东西:

beforeclose: function(e, ui) {
     var $dlg = $(this);
     if($dlg.data('can-close')) {
         $dlg.removeData('can-close');
         return true;
     }
     $("#confirm").dialog({
         //...
         buttons: {
             Confirm: function() {
                 $(this).dialog('close');
                 $dlg.data('can-close', true);
                 $dlg.dialog('close');
             },
             Cancel: function() {
                 $(this).dialog('close');
             }
         }
     });
     return false;
 }

演示:http://jsfiddle.net/ambiguous/jYZpD/

答案 1 :(得分:3)

我将回答我自己的问题,这很好用:

$("#first").dialog({ width: 304, modal: true,

  beforeclose: function (e, ui) 
  {
        $("#confirm").dialog({ width: 500, modal: true,
            buttons: {
                "Confirm": function () {
                    document.location.href = "/Home/Index";
                },
                "Cancel": function () {
                    $(this).dialog('close');
                }
            }
        });
      return false;
    }
});