3
    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

putvande
  • 15,068
  • 3
  • 34
  • 50
smooster
  • 31
  • 1
  • 1
  • 2
  • Check http://stackoverflow.com/questions/887029/how-to-implement-confirmation-dialog-in-jquery-ui-dialog Hope this helps you..:) Thanks Ab – Arun Bertil Jul 10 '13 at 09:30
  • http://stackoverflow.com/questions/887029/how-to-implement-confirmation-dialog-in-jquery-ui-dialog Thanks AB – Arun Bertil Jul 10 '13 at 09:34

7 Answers7

14

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/

anmarti
  • 5,045
  • 10
  • 55
  • 96
5

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();
   }
});
Dipesh Parmar
  • 27,090
  • 8
  • 61
  • 90
4

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;
        } 
    }
});
nix
  • 3,262
  • 2
  • 21
  • 36
2

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/

Stan
  • 25,744
  • 53
  • 164
  • 242
  • Comment isn't entirely accurate; comparison with === is a type-based comparison and == is interpreted. False: `1==='1'`, True: `1=='1'`. – Epoch Feb 18 '22 at 18:07
1

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

Chirag Vidani
  • 2,519
  • 18
  • 26
0

Use

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

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

Rachit Doshi
  • 183
  • 1
  • 6
0

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 (a.k.a. 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

Jeff Penner
  • 361
  • 3
  • 3