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

393

03 февраля 2017, 06:09

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

$('.dial').dialog({ 
    autoOpen:false; //Изначально закрыто 
}); 
 
$('img').click(function(){ 
  $('.dial').dialog("open"); //По щелчку по картинки открывается   
}); 
 
$(document).click(function(){ 
  $('.dial').dialog('close'); //По щелчку на любом месте закрывается 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 <div title="Окно" class="dial"> 
132 
 </div>

Answer 1

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'); 
  } 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<img src="//i.stack.imgur.com/huPUd.jpg?s=128&g=1" /> 
<div title="Окно" class="dial">132</div>

Answer 2

$('.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');
});