Диалоговое окно плагина jq UI

PeGaS

Как заставить диалоговое окно закрыться при щелчке по любому месту за пределами окна?

$('.dial').dialog({
    autoOpen:false; //Изначально закрыто
});

$('img').click(function(){
  $('.dial').dialog("open"); //По щелчку по картинки открывается  
});

$(document).click(function(){
  $('.dial').dialog('close'); //По щелчку на любом месте закрывается
});
<div title="Окно" class="dial">
132
 </div>
2 ответа

PeGaS

3 проблемы:

  • внутри объекта не должно быть ;
  • после открытия диалога событие всплывает до документа - имеет смысл это отменить
  • имеет смысл не закрывать диалог при клике внутри него
$('.dial').dialog({
    autoOpen: false
});

$('img').click(function (event){
  $('.dial').dialog("open");
  event.stopPropagation();
});

$(document).click(function (event) {
  if (!$(event.target).closest(".dial").length) {
    $('.dial').dialog('close');
  }
});
<div title="Окно" class="dial">132</div>


PeGaS

$('.dial').dialog({
    autoOpen:false; //Изначально закрыто.
});

$('img').click(function(){
  $('.dial').dialog("open"); //По щелчку по картинки открывается  
});

  $(document).click(function(event){
  if($(event.target).closest("img, .dial").length) return;
  $('.dial').dialog('close');
});

licensed under cc by-sa 3.0 with attribution.