jQuery Dialog, fermeture lorsque cliquez en dehors

Question

Je sais que je peux utiliser ce qui suit pour fermer la boîte de dialogue en cliquant à l'extérieur:

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

Mais comment puis-je changer cela il fonctionne pour chaque boîte de dialogue, à savoir que je veux dire fermer toute boîte de dialogue car nous avons plusieurs sur une page et serait plus facile d'avoir une ligne de code?

Answer 1

Peut-être que cela est exagéré, mais essayez

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

Vous devez exécuter ce code une fois sur votre page, la méthode live devrait le faire fonctionner chaque fois que vous ouvrez une boîte de dialogue.

EDIT: Si cela ne fonctionne pas, c'est peut-être la faute de .dialog. Essayez

$('.ui-widget-overlay').live('click', 
    function() { 
     $(".ui-dialog").each(
      function() { 
       $(this).dialog("close"); 
      } 
     ); 
    } 
); 

Answer 2

vous pouvez donner une classe

puis sélectionnez-le et exécutez chaque boîte de dialogue sur chacun et cose même si son ouverture pas fonctionnera:

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

Answer 3

Les réponses presque travail. Sauf que vous ne pouvez pas appeler le dialog('close') sur des éléments avec la classe ui-dialog. C'est le contenu généré par jquery-ui autour de votre élément d'origine et la fermeture doit être appelée sur l'élément d'origine que vous avez utilisé lorsque vous avez appelé .dialog. Heureusement jquery leur ajoute une classe ui-dialog-content. Utiliser pour modifier la solution de Guy et vous obtenez:

$(document).on('click', '.ui-widget-overlay', function() { 
    $('.ui-dialog-content').each(function() { 
     $(this).dialog('close'); 
    }); 
});​ 

Vous pouvez l'essayer par vous-même sur le jsfiddle.

EDIT: a changé .click en .live car le ui-widget-overlay n'existe peut-être pas encore lorsque ce code est exécuté.

EDIT: modifié à .on au lieu de .live car il est déprécié.

Answer 4

De mes tests, cela fonctionne bien.

$('[data-role=dialog]').dialog("close"); 

Il ferme n'importe quel dialogue.