Как не закрывать Диалог пользовательского интерфейса jQuery?

Question

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

Как не закрывать Диалог пользовательского интерфейса jQuery? Теперь, если я нажимаю кнопку закрытия (x), у меня появляется предупреждение, но диалог закрывается.

LIVE DEMO

Answer 1

Ну вы можете сделать это путем удаления кнопки закрытия.

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

Answer 2

Вы можете добавить опцию beforeClose в ваш диалог и вернуть ложна на него:

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

Демо: http://jsfiddle.net/UfpHz/9/

Answer 3

Вы можете обрабатывать событие закрытия также

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

более документацию можно найти здесь link

Demo

Answer 4

Вы должны искать ошибки на 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/

Answer 5

Вы можете использовать beforeClose событие, чтобы предотвратить диалог от закрытия.

Как это:

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

Answer 6

Использование

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

из URL: http://api.jqueryui.com/dialog/#event-beforeClose

Answer 7

Если я правильно понимаю, вы хотите, чтобы позволить пользователю нажать на кнопку '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: [ 
      { } 
     ] 
}); 

По сути то, что происходит здесь, были, спрашивают, если кнопка для диалога Х фокусируясь (а.к.а. щелкнул), а затем мы возвращаемся ложным. Вы можете инициировать другое событие здесь, если хотите, например, создать свой собственный «Вы уверены, что хотите отменить?». диалоговое окно вверху.

Cheers! Удачи.

Джеффри