Fermer le dialogue en cas de clic (n'importe où)

Question

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

Answer 1

Edit : Voici un plugin dont je suis l'auteur et qui étend le jQuery UI Dialog pour y inclure fermeture lors d'un clic extérieur plus d'autres fonctionnalités : https://github.com/jasonday/jQuery-UI-Dialog-extended

Voici 3 méthodes pour fermer une boîte de dialogue jquery UI en cliquant en dehors du popin :

Si la boîte de dialogue est modale/avec un arrière-plan superposé : 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 dialogue 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');
        }
    });

Méthode de dialogue non-modale 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;
    }
});

Answer 2

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

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

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

Editar: Les éléments suivants ont été testés pour Kendo également :

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

Answer 3

Si vous avez plusieurs boîtes de dialogue qui pourraient être ouvertes sur une page, cela permettra de fermer n'importe laquelle d'entre elles en cliquant sur le fond :

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

(Cela ne fonctionne que pour les boîtes de dialogue modales, car cela dépend de '.ui-widget-overlay'. Et il ferme todo ouvrir des boîtes de dialogue chaque fois que l'on clique sur l'arrière-plan de l'une d'entre elles).

Answer 4

Ce post peut vous aider :

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

Voir aussi Comment fermer une boîte de dialogue modale jQuery UI en cliquant en dehors de la zone couverte par la boîte ? pour savoir quand et comment faire une demande overlay clic ou événement en direct, selon la façon dont vous utilisez le dialogue sur la page.

Answer 5

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 dynamique.

La solution qui, selon moi, fonctionne dans tous les cas est la suivante :

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