Jq ui plugin dialog

Question

How to force the dialog box to close when clicking on any place outside the window?

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

Qwertiy ♦ Qwertiy 76.3k 17 74 201 · Answer 1 · 2017-01-31T19:11:44

3 problems:

inside the object should not be ;
after the opening of the dialogue the event pops up to the document - it makes sense to cancel it
it makes sense not to close the dialog when clicking inside it

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

DimenSi 1,209 3 17 · Answer 2 · 2017-01-31T19:03:36

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

The golden rule, before writing on stackoverflow, is better to google.

Jq ui plugin dialog

2 answers 2

More articles: