7
votes

jquery ui 1.7.1 Modal Fermer sur la superposition Cliquez

J'essaie de remplacer le comportement par défaut d'une boîte de dialogue Modal JQuery UI pour fermer la boîte lorsque la superposition est cliquée. Le code que j'ai ci-dessous fermera la boîte de dialogue après que je l'ouvre pour la première fois et cliquez sur la superposition. Lorsque j'ouvre la boîte de dialogue à nouveau, en cliquant sur la superposition ne fait rien. Il me manque un événement ici. Peut-on souligner ce que je fais mal ici?

Merci! P>

$(function(){

        $('#production_schedule_dialog').dialog({
            autoOpen: false,
            width: 570,
            modal: true,
            closeOnEscape: true
        }); 

        $('#production_schedule_dialog_link').click(function(){
            $('#production_schedule_dialog').dialog('open');
            return false;
        });

        $(document).bind('click', dialogBlur);
});


var dialogBlur = function(event){
    var target = $(event.target);
    if (target.is('.ui-dialog') || target.parents('.ui-dialog').length) {
        return;
    }

    $('.ui-dialog:visible').find('.ui-dialog-titlebar-close').trigger('click');

    $(document).unbind('click', dialogBlur);
}


0 commentaires

8 Réponses :


1
votes

En regardant votre exemple, il semble que vous n'éliminiez pas l'événement et que vous ne le réglez pas.

Essayez de déplacer votre appel de liaison: xxx

qui devrait reculer votre écouteur flou chaque fois que votre boîte de dialogue est ouverte.


0 commentaires

4
votes

Je ne sais pas pourquoi votre code ne fonctionne pas, mais je l'ai pris, modifié, et j'ai reçu une version qui semble fonctionner comme vous et je souhaite:

var openDialogWindow = function(dialogId)
 {

     $(dialogId).dialog('open');
     $(".ui-widget-overlay").bind("click", closeDialogWindowOnOverlayClick);
 }

 var closeDialogWindowOnOverlayClick = function(event){
     var closeButton = $(".ui-dialog:visible").find(".ui-dialog-titlebar-close");
     closeButton.trigger("click");
     $(".ui-widget-overlay").unbind("click", closeDialogWindowOnOverlayClick);
 }


1 commentaires

J'ai essayé de 5 façons différentes, c'est le seul que j'ai pu utiliser (et le plus propre) via l'événement «ouvert» de la boîte de dialogue. J'ai défini une variable de dialogoptions de valeur par défaut avec $ ("ui-widget-superposition"). Bind ("Cliquez sur", FinioriogwindowonoverlayClick); À l'intérieur du rappel d'événement 'ouvert' et je dérive tous mes dialogues à l'échelle de ce site à partir de ce paramètre AKA $ ('

'). Boîte de dialogue ($. EXTERMINE ({}, défautsSettings, {/ * Paramètres spécifiques * /})); Fonctionne magnifiquement. Merci!




15
votes

moyen le plus simple de le faire: http: // www .ryanjeffords.com / Blog / Entrée / Clôture-A-JQuery-UI-dialogou-quand-the-dialogue-perd-perd-focus

Ajouter ceci: p>

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


2 commentaires

.Live () est obsolète, utilisez .on () à la place.


Il peut y avoir plusieurs boîtes de dialogue sur une seule page avec des identifiants différents. Vous pouvez donc fermer la boîte de dialogue à l'aide de cet identifiant.



0
votes

Tant de réponses compliquées ... Voici une simple réutilisable.

$('.ui-widget-overlay').live('click', function(event)
{
    $(this).prev().find('div:nth-child(2)').dialog('close');
});


0 commentaires

10
votes

La solution de Paul fonctionne bien si vous utilisez une ancienne version de JQuery (Pre-1.7). Maintenant, .Live () code> est obsolète cependant. Essayez d'utiliser sur () code> à la place.

$('.ui-widget-overlay').on("click", function() {
    //Close the dialog
    $(this).find(".dialog").dialog("close");
});


2 commentaires

Le "widget-widget-widge-widge" est créé de manière dynamique. Vous devez être sûr que l'élément existe avant d'ajouter ces lignes. Une meilleure approche consisterait à ajouter de l'événement sur le document: $ (document) .on ("cliquez sur", fonction () {$ ("boîte de dialogue"). Boîte de dialogue ("Fermer");}); < / code>


Oui, .ui-widget-Widget-Wrowge-Widget-Widge- est créé de manière dynamique, ce code ne sera donc pas nécessairement lié au besoin. Je résolvai cela en la mettant dans l'événement Open () de la boîte de dialogue, de sorte qu'il se lie après .UI-widget-Widge-Widge-Widge-Widget-Widgey est créé. Affectation d'un Cliquez sur L'événement sur l'ensemble du document peut être un peu surpuissant.



3
votes

meilleure façon de le faire: xxx


2 commentaires

Pourquoi ne pas simplement attacher l'événement à .ui-widget-superposition ? Pourquoi créez-vous un événement qui sera collé de manière permanente sur le corps pour quelque chose qui n'est pas définitivement là?


Parce que l'ui-widget-superposition est créée de manière dynamique mais attachez-la sur le corps n'est pas une bonne idée non plus



1
votes

Si la page contient quelques dialogues, vous pouvez utiliser cette méthode universelle:

$(document).on('click', '.ui-widget-overlay', function() {
  var $dialog = $(this).siblings('.ui-dialog:visible')
    .find('.ui-dialog-content');
  if ($dialog.length && $dialog.dialog('isOpen')) {
    $dialog.dialog('close');
  }
});


2 commentaires

Il suffit de remplacer les "frères et sœurs" par "Suivant" et il fonctionnera aussi avec plusieurs boîtes de dialogue ouvertes ..


C'est exactement ce dont j'avais besoin. J'ai de nombreux types de boîte de dialogue, donc l'ajout de code à chacun semblait idiot. Cela devrait être la meilleure réponse! À peu près pâte et aller. Merci, un utilisateur anonyme mystérieux d'un point!