web-dev-qa-db-fra.com

Fermer la boîte de dialogue au clic (n'importe où)

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?

jqueryjquery-uidialogmodal-dialog
50
Fuxi

Edit: Voici un plugin que j'ai créé qui étend la boîte de dialogue jQuery UI à l’inclusion de fermeture lorsque vous cliquez à l'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 lorsque vous cliquez en dehors de popin:

Si le dialogue est modal/a une superposition d'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 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');
        }
    });

Dialogue non modal 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;
    }
});
124
Jason

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, elle devrait fournir la fonctionnalité que vous recherchez.

Le code ressemblera à ceci (non testé):

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

Edit: Ce qui suit a été testé pour Kendo ainsi:

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

Si vous avez plusieurs boîtes de dialogue pouvant être ouvertes sur une page, cela vous permettra de 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 dialogues modaux, car il s'appuie sur '.ui-widget-overlay'. Et il ferme les dialogues all open chaque fois que l'on clique sur l'arrière-plan de l'un d'eux.)

8
jackadams49

Si vous souhaitez le faire pour toutes les boîtes de dialogue 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');
        });
    }   

});
7
DaWolf

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 dialogue modale de l'interface utilisateur jQuery en cliquant en dehors de la zone couverte par la boîte? pour une explication du moment et de la manière dont appliquer overlay clic ou événement en direct, en fonction de la manière dont vous utilisez le dialogue de la page.

6
jk.

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 que je trouve fonctionne dans tous les cas est la suivante:

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

Si le code des publications précédentes ne fonctionne pas, essayez ceci:

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

Un peu tard mais c’est une solution qui a fonctionné pour moi. Parfait si votre modal est à l'intérieur de la balise overlay. Ainsi, le modal se ferme lorsque vous cliquez n'importe où en dehors du contenu modal.

HTML

<div class="modal">  
  <div class="overlay">
    <div class="modal-content">
      <p>HELLO WORLD!</p>
    </div>
  </div>
</div>

JS

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

Voici un exemple de travail

0
dragoeco

Essaye ça:

$(".ui-widget-overlay").click(function () {
    $(".ui-icon.ui-icon-closethick").trigger("click");
});
0
Stepan Tripal

Face au même problème, j'ai créé un petit plugin qui permet de fermer une boîte de dialogue lorsque vous cliquez en dehors de celle-ci, qu'il s'agisse d'une boîte de dialogue modale ou non modale. Il supporte un ou plusieurs dialogues 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

0
Laurent