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);
}
8 Réponses :
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: p> qui devrait reculer votre écouteur flou chaque fois que votre boîte de dialogue est ouverte. p> p>
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);
}
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 $ ('
Ce message peut aider: p>
HTTP: // www.jensbits.com/2010/06/16/JQUERY-MODAL-DIALOG-CLOSE-ON-OVERLAY-CLICK/ P>
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");
});
.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.
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');
});
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");
});
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- code> 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 () CODE> de la boîte de dialogue, de sorte qu'il se lie après .UI-widget-Widge-Widge-Widge-Widget-Widgey code> est créé. Affectation d'un Cliquez sur CODE> L'événement sur l'ensemble du document peut être un peu surpuissant.
meilleure façon de le faire:
Pourquoi ne pas simplement attacher l'événement à .ui-widget-superposition code>? 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
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');
}
});
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!