Fermer le dialog sur le clic (n’importe où)

Existe-t-il une option par défaut pour fermer une boîte de dialog jQuery en cliquant quelque part sur l’écran au lieu de l’icône de fermeture?

Edit: Voici un plug-in que j’ai créé pour étendre la boîte de dialog de l’interface utilisateur jQuery afin d’inclure la fermeture lorsque vous cliquez en dehors, plus d’autres fonctionnalités: https://github.com/jasonday/jQuery-UI-Dialog-extended

Voici 3 méthodes pour fermer une boîte de dialog d’interface utilisateur jquery en cliquant en dehors de la fenêtre popin:

Si la boîte de dialog est modale / a une incrustation en arrière-plan: http://jsfiddle.net/jasonday/6FGqN/

jQuery(document).ready(function() { jQuery("#dialog").dialog({ bgiframe: true, autoOpen: false, height: 100, modal: true, open: function() { jQuery('.ui-widget-overlay').bind('click', function() { jQuery('#dialog').dialog('close'); }) } }); }); 

Si le dialog est non modal Méthode 1: http://jsfiddle.net/jasonday/xpkFf/

 // Close Pop-in If the user clicks anywhere else on the page jQuery('body') .bind('click', function(e) { if(jQuery('#dialog').dialog('isOpen') && !jQuery(e.target).is('.ui-dialog, a') && !jQuery(e.target).closest('.ui-dialog').length ) { jQuery('#dialog').dialog('close'); } }); 

Boîte de dialog non modale Méthode 2: http://jsfiddle.net/jasonday/eccKr/

 $(function() { $('#dialog').dialog({ autoOpen: false, minHeight: 100, width: 342, draggable: true, resizable: false, modal: false, closeText: 'Close', open: function() { closedialog = 1; $(document).bind('click', overlayclickclose); }, focus: function() { closedialog = 0; }, close: function() { $(document).unbind('click'); } }); $('#linkID').click(function() { $('#dialog').dialog('open'); closedialog = 0; }); var closedialog; function overlayclickclose() { if (closedialog) { $('#dialog').dialog('close'); } //set to one because click on dialog box sets to zero closedialog = 1; } }); 

Lors de la création d’une fenêtre de dialog JQuery, JQuery insère une classe ui-widget-overlay. Si vous liez une fonction de clic à cette classe pour fermer la boîte de dialog, celle-ci doit fournir les fonctionnalités que vous recherchez.

Le code sera quelque chose comme ça (non testé):

 $('.ui-widget-overlay').click(function() { $("#dialog").dialog("close"); }); 

Edit: Ce qui suit a également été testé pour le Kendo :

 $('.k-overlay').click(function () { var popup = $("#dialogId").data("kendoWindow"); if (popup) popup.close(); }); 

Si vous pouvez ouvrir plusieurs boîtes de dialog sur une page, vous pourrez les fermer en cliquant sur l’arrière-plan:

 $('body').on('click','.ui-widget-overlay', function() { $('.ui-dialog').filter(function () { return $(this).css("display") === "block"; }).find('.ui-dialog-content').dialog('close'); }); 

(Ne fonctionne que pour les boîtes de dialog modales, car il repose sur «.ui-widget-overlay». Et il ferme toutes les boîtes de dialog ouvertes à chaque fois que l’utilisateur clique sur l’arrière-plan).

Si vous souhaitez le faire pour toutes les boîtes de dialog du site, essayez le code suivant …

 $.extend( $.ui.dialog.prototype.options, { open: function() { var dialog = this; $('.ui-widget-overlay').bind('click', function() { $(dialog).dialog('close'); }); } }); 

Ce post peut aider:

http://www.jensbits.com/2010/06/16/jquery-modal-dialog-close-on-overlay-click/

Voir aussi Comment fermer une boîte de dialog modale de l’interface utilisateur jQuery en cliquant en dehors de la zone couverte par la boîte? pour savoir quand et comment appliquer un clic ou un événement en direct en fonction de la manière dont vous utilisez la boîte de dialog sur la page.

Dans certains cas, la réponse de Jason est exagérée. Et $('.ui-widget-overlay').click(function(){ $("#dialog").dialog("close"); }); ne fonctionne pas toujours avec du contenu dynamic.

La solution que je trouve fonctionne dans tous les cas est la suivante:

 $('body').on('click','.ui-widget-overlay',function(){ $('#dialog').dialog('close'); }); 

Si le code des messages précédents ne fonctionne pas, essayez ceci:

 $("a.ui-dialog-titlebar-close")[0].click(); 

Face au même problème, j’ai créé un petit plugin qui permet de fermer une boîte de dialog en cliquant en dehors de celui-ci, que ce soit une boîte de dialog modale ou non modale. Il prend en charge une ou plusieurs boîtes de dialog sur la même page.

Plus d’informations sur mon site ici: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside

Laurent

Essaye ça:

 $(".ui-widget-overlay").click(function () { $(".ui-icon.ui-icon-closethick").sortinggger("click"); }); 

Un peu tard mais c’est une solution qui a fonctionné pour moi. Parfait si votre modal est dans la balise de superposition. Ainsi, le modal se fermera lorsque vous cliquerez n’importe où en dehors du contenu modal.

HTML

  

JS

 $(document).on("click", function(event) { if ($(event.target).has(".modal-content").length) { $(".modal").hide(); } }); 

Voici un exemple de travail