如何使用jQuery UI对话框检查用户是否通过单击关闭图标关闭了对话框

Question

我有两个对话框。用户在第一个对话框中选择某个值，它会反映在页面的DOM中。第一个对话框关闭后，会显示另一个对话框。如果用户点击右上角的叉号按钮关闭对话框，我想要撤销之前对话框所做的更改。在确定按钮上，我需要通过设置值来执行一些操作。在此按钮上，我将关闭对话框。在关闭事件上，我现在有重置表单的代码。但是，如果用户取消对话框，我怎么知道关闭事件是如何触发的，即是从确定按钮还是叉号按钮？

- KutePHP

Answer 1

你可以通过它的类名 ".ui-dialog-titlebar-close" 找到那个 "X" 按钮，然后在创建对话框时将一个 "click" 处理程序附加到它上面，像这样：

$("#test").dialog({
    //dialog options...
}).parent().find(".ui-dialog-titlebar-close").click(function() {
    alert("Closed by title bar X, clear the other form here");
});

你可以在这里进行测试。

- Nick Craver

---

对话框也可以使用“Esc”键关闭。 - rahul

Answer 2

您可以使用 beforeClose 事件。

- rahul

Answer 3

使用模型id

$('#myModalId').on('show.bs.modal', function (e) {
  // Do your operation
})

使用模式类

$('.myModalClass').on('show.bs.modal', function (e) {
  // Do your operation
})

模型

<div class="modal fade myModalClass" id="myModalId" role="dialog">
    // your code
</div>

在这里阅读更多 http://getbootstrap.com/javascript/#modals

- Avanish Kumar

Answer 4

我发现这里的解决方案非常有用，作者是@Vickel

close: function( event, ui ) {
//some_code();
if(event.originalEvent ){
    // triggered by clicking on dialog box X or pressing ESC
    // not triggered if a dialog button was clicked
    some_code();
}        
$(this ).dialog( 'destroy' )
}

- Sean N.