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

Edit: voici un plugin que j'ai écrit qui étend la boîte de dialogue jQuery UI pour inclure fermeture en cliquant à l'extérieur plus autres caractéristiques: https://github.com/jasonday/jQuery-UI-Dialog-extended

voici 3 méthodes pour fermer une boîte de dialogue jQuery UI lorsque vous cliquez à l'extérieur de popin:

si la boîte de dialogue est modale/a la 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 le dialogue est la méthode non-modale 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');
        }
    });

de dialogue Non Modale de la 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 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, il doit fournir les fonctionnalités que vous recherchez.

Code sera quelque chose comme 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();
        });

si vous avez plusieurs dialogues qui peuvent être ouverts sur une page, cela permettra à l'un d'eux d'être fermé 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');
});

(fonctionne uniquement pour les dialogues modaux, car il repose sur".ui-widget-overlay". Et il ne ferme tous dialogues ouverts chaque fois que le fond de l'un d'eux est cliqué.)

si vous souhaitez le faire pour tous les dialogues à travers le site essayer 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 un jQuery UI boîte de dialogue modale en cliquant en dehors de la zone couverte par la case? pour une explication de quand et comment appliquer overlay cliquez sur ou en direct de l'événement en fonction de la façon dont vous utilisez le dialogue 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 un contenu dynamique.

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

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

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

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

face au même problème, j'ai créé un petit plugin qui permet de fermer un dialogue en cliquant en dehors de celui-ci que ce soit un dialogue modal ou non. Il supporte un ou plusieurs dialogues sur la même page.

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

Laurent

essayez ceci:

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

un peu tard mais c'est une solution qui a fonctionné pour moi. Parfait si votre modal est à l'intérieur de l'étiquette de superposition. Ainsi, le modal se fermera 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 pratique