如何不关闭 jQuery UI 的对话框

How to do not close Dialog of jQuery UI?

本文关键字：对话框 UI jQuery 何不关      更新时间：2023-09-26
    var error = 1;
    $(document).on('click', '.ui-icon-closethick', function(event){
        if(error == 1){
           alert('error');
           event.preventDefault();
           event.stopPropagation();
           return false;
        } 
    })

如何不关闭jQuery UI的对话框？现在，如果我单击关闭按钮(x(，则会出现警报错误，但对话框正在关闭。

现场演示

您可以将

beforeClose选项添加到对话框中并在其上返回 false：

$("#dialog").dialog({
   beforeClose: function(){
     return false;
   }
});

演示：http://jsfiddle.net/UfpHz/9/

好吧，

您可以通过删除关闭按钮来做到这一点。

$("#YOUR_DIALOG_DOM_ID").dialog({
   closeOnEscape: false,
   open: function(event, ui)
   {
      $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
   }
});
可以使用

beforeClose 事件来阻止对话框关闭。

喜欢这个：

$( "#dialog" ).dialog({
    beforeClose: function(){
        if(error == 1){
            alert('error');
            return false;
        } 
    }
});

您需要查找事件beforeClose错误并在那里返回true或false。

var error = 1;
$(function () {
    $("#dialog").dialog({
        beforeClose: function (event, ui) {
            if (error === 1) { // in javascript you compare with ===, not ==
                alert('error');
                return false; // error, dialog will not close
            }
            return true; // no error, dialog will close
        }
    });
});

http://jsfiddle.net/RHhwV/

您也可以处理关闭事件

$(function() {
      $( "#dialog" ).dialog({
          close: function(event,ui){
              $(this).dialog('open');
          }
      });
  });

更多文档可在此链接中找到

演示

使用

beforeClose: function( event, ui ) {return false;}

从网址 ： http://api.jqueryui.com/dialog/#event-beforeClose

如果我理解正确，您希望允许用户单击右上角对话框中的"X"按钮，但您不想允许他们关闭窗口。您可能希望改为触发其他事件。

使用您自己的 dialogClass 在您自己的代码中尝试此示例：

$("#dialogId").dialog({
        dialogClass: "dialogId",
        title:     "someTitle",
        //modal:     true,
        //autoOpen:  false, 
        //resizable: false,
        //closeOnEscape: false,
        height:    500,
        width:     1000,
        open : function(event, ui){       
        },
        beforeClose: function (event, ui) {
            if ($(".dialogId .ui-dialog-titlebar-close").is(":focus")) { 
                alert('X clicked but do not close!');
                return false; // do not close dialog
            }
            return true; // close dialog
        }, 
        buttons: [
          { }
        ]
});

从本质上讲，这里发生的事情是询问对话框的 X 按钮是否被聚焦(即单击(，然后我们返回 false。如果您愿意，可以在此处触发其他事件，例如在顶部弹出自己的自定义"您确定要取消吗？"对话框。

干杯！祝你好运。

杰弗里

相关文章：