How to do not close Dialog of jQuery UI?

Question

    var error = 1;
    $(document).on('click', '.ui-icon-closethick', function(event){
        if(error == 1){
           alert('error');
           event.preventDefault();
           event.stopPropagation();
           return false;
        } 
    })

How to do not close Dialog of jQuery UI? Now if i click on close button (x) then i have alert error, but dialog is closing.

LIVE DEMO

Answer 1

You can add the beforeClose option to your dialog and return false on it:

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

Demo: http://jsfiddle.net/UfpHz/9/

Answer 2

Well you can do this by removing close button.

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

Answer 3

You can use the beforeClose event to prevent the dialog from closing.

Like this:

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

Answer 4

You need to look for errors on beforeClose event and return true or false there.

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/

Answer 5

You can handle close event also

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

more documentation can be found at this link

Demo

Answer 6

Use

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

from url : http://api.jqueryui.com/dialog/#event-beforeClose

Answer 7

If I understand correctly, you want to allow the user to click the 'X' button on the top right dialog, but you do not want to allow them to close the window. You probably want to trigger a different event instead.

Try this example out in your own code with your own 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: [
          { }
        ]
});

Essentially what's happening here is were are asking if the dialog's X button is being focused (aka clicked) and then we return false. You may trigger a different event here if you like, such as creating your own custom "Are you sure you want to cancel?" dialog popup on top.

Cheers! Good luck.

Jeffrey