jQuery UI - fermer la boîte de dialogue lorsque cliqué à L'extérieur
j'ai une boîte de dialogue jQuery UI qui s'affiche lorsque des éléments spécifiques sont cliqués. Je voudrais fermer la boîte de dialogue si un clic se produit n'importe où autre que sur ces éléments déclencheurs ou la boîte de dialogue elle-même.
voici le code pour ouvrir le dialogue:
$(document).ready(function() {
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 50,
resizable: false,
width: 375
});
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html($hint.html());
$field_hint.dialog('option', 'position', [162, $hint.offset().top + 25]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
/*$(document).click(function() {
$field_hint.dialog('close');
});*/
});
si je décommente la dernière partie, le dialogue ne s'ouvre jamais. Je suppose que c'est parce que le même clic qui ouvre le dialogue le ferme à nouveau.
code de travail Final
Note: Ceci utilise le jQuery outside events plugin
$(document).ready(function() {
// dialog element to .hint
var $field_hint = $('<div></div>')
.dialog({
autoOpen: false,
minHeight: 0,
resizable: false,
width: 376
})
.bind('clickoutside', function(e) {
$target = $(e.target);
if (!$target.filter('.hint').length
&& !$target.filter('.hintclickicon').length) {
$field_hint.dialog('close');
}
});
// attach dialog element to .hint elements
$('.hint').click(function() {
var $hint = $(this);
$field_hint.html('<div style="max-height: 300px;">' + $hint.html() + '</div>');
$field_hint.dialog('option', 'position', [$hint.offset().left - 384, $hint.offset().top + 24 - $(document).scrollTop()]);
$field_hint.dialog('option', 'title', $hint.siblings('label').html());
$field_hint.dialog('open');
});
// trigger .hint dialog with an anchor tag referencing the form element
$('.hintclickicon').click(function(e) {
e.preventDefault();
$($(this).get(0).hash + ' .hint').trigger('click');
});
});
19 réponses
découvrez les jQuery Événements extérieurs plugin
permet de faire:
$field_hint.bind('clickoutside',function(){
$field_hint.dialog('close');
});
désolé de traîner cela vers le haut après si longtemps, mais j'ai utilisé le dessous. Les inconvénients? Voir la fonction Ouvrir...
$("#popup").dialog(
{
height: 670,
width: 680,
modal: true,
autoOpen: false,
close: function(event, ui) { $('#wrap').show(); },
open: function(event, ui)
{
$('.ui-widget-overlay').bind('click', function()
{
$("#popup").dialog('close');
});
}
});
Oubliez pas d'utiliser un autre plugin:
voici 3 méthodes pour fermer une boîte de dialogue jQuery UI en cliquant à l'extérieur de popin:
si le dialogue est modal/a la superposition de fond: 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: 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-Modal 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;
}
});
il suffit d'ajouter ce script global, qui ferme toutes les boîtes de dialogue modales en Les cliquant sur le site.
$(document).ready(function()
{
$(document.body).on("click", ".ui-widget-overlay", function()
{
$.each($(".ui-dialog"), function()
{
var $dialog;
$dialog = $(this).children(".ui-dialog-content");
if($dialog.dialog("option", "modal"))
{
$dialog.dialog("close");
}
});
});;
});
j'ai dû faire deux parties. D'abord le gestionnaire de clic extérieur:
$(document).on('click', function(e){
if ($(".ui-dialog").length) {
if (!$(e.target).parents().filter('.ui-dialog').length) {
$('.ui-dialog-content').dialog('close');
}
}
});
cela appelle dialog('close') sur la classe générique ui-dialog-content , et donc fermera toutes les boîtes de dialogue si le clic n'est pas originaire d'un. Il fonctionnera également avec les dialogues modaux, puisque la superposition ne fait pas partie de la boîte .ui-dialog .
le problème est:
- la plupart des dialogues sont créés en raison de clics à l'extérieur de un dialogue
- ce gestionnaire s'exécute après que ces clics ont créé une boîte de dialogue et ont bouillonné jusqu'au document, donc il les ferme immédiatement.
pour corriger cela, j'ai dû ajouter stopPropagation à ces gestionnaires de clics:
moreLink.on('click', function (e) {
listBox.dialog();
e.stopPropagation(); //Don't trigger the outside click handler
});
cette question est un peu vieille, mais dans le cas où quelqu'un veut fermer une boîte de dialogue qui N'est pas modale lorsque l'utilisateur clique quelque part, vous pouvez utiliser ce que j'ai pris dans le jQuery UI multi-select plugin . Le principal avantage est que le clic n'est pas "perdu" (si l'utilisateur veut cliquer sur un lien ou sur un bouton, l'action est fait).
$myselector.dialog({
title: "Dialog that closes when user clicks outside",
modal:false,
close: function(){
$(document).off('mousedown.mydialog');
},
open: function(event, ui) {
var $dialog = $(this).dialog('widget');
$(document).on('mousedown.mydialog', function(e) {
// Close when user clicks elsewhere
if($dialog.dialog('isOpen') && !$.contains($myselector.dialog('widget')[0], e.target)){
$myselector.dialog('close');
}
});
}
});
vous pouvez le faire sans utiliser de plug-in supplémentaire
var $dialog= $(document.createElement("div")).appendTo(document.body);
var dialogOverlay;
$dialog.dialog({
title: "Your title",
modal: true,
resizable: true,
draggable: false,
autoOpen: false,
width: "auto",
show: "fade",
hide: "fade",
open:function(){
$dialog.dialog('widget').animate({
width: "+=300",
left: "-=150"
});
//get the last overlay in the dom
$dialogOverlay = $(".ui-widget-overlay").last();
//remove any event handler bound to it.
$dialogOverlay.unbind();
$dialogOverlay.click(function(){
//close the dialog whenever the overlay is clicked.
$dialog.dialog("close");
});
}
});
ici $ dialog est le dialogue. Ce que nous faisons essentiellement est d'obtenir le dernier widget de superposition à chaque fois que cette boîte de dialogue est ouverte et de lier un gestionnaire de clic à cette superposition pour fermer la boîte de dialogue $à chaque fois que la superposition est cliquée.
pas besoin du plugin outside events...
il suffit d'ajouter un gestionnaire d'événements pour l' .ui-widget-superposition de la div:
jQuery(document).on('click', 'body > .ui-widget-overlay', function(){
jQuery("#ui-dialog-selector-goes-here").dialog("close");
return false;
});
assurez-vous que le sélecteur que vous avez utilisé pour la boîte de dialogue de jQuery ui est aussi appelé à la fermer.. c'est à dire #ui-la boîte de dialogue sélecteur de va-ici
cela n'utilise pas jQuery UI, mais utilise jQuery, et peut être utile pour ceux qui n'utilisent pas jQuery UI pour une raison quelconque. Faites comme ceci:
function showDialog(){
$('#dialog').show();
$('*').on('click',function(e){
$('#zoomer').hide();
});
}
$(document).ready(function(){
showDialog();
});
ainsi, une fois que j'ai montré une boîte de dialogue, j'ajoute un gestionnaire de clic qui ne cherche que le premier clic sur n'importe quoi.
maintenant, ce serait mieux si je pouvais l'amener à ignorer les clics sur n'importe quoi sur #dialog et son contenu, mais quand j'ai essayé de changer $('*') avec $(':not("#dialog,#dialog *")'), il encore détecté #dialogue clics.
de toute façon, je l'utilisais purement pour une photothèque, donc ça marchait bien dans ce but.
L'exemple donné(s) utilisez un dialogue avec l'id '#dialogue", j'ai besoin d'une solution à proximité de dialogue:
$.extend($.ui.dialog.prototype.options, {
modal: true,
open: function(object) {
jQuery('.ui-widget-overlay').bind('click', function() {
var id = jQuery(object.target).attr('id');
jQuery('#'+id).dialog('close');
})
}
});
merci à mon collègue Youri Arkesteijn pour la suggestion d'utiliser le prototype.
pour ceux que vous êtes intéressés, j'ai créé un plugin générique qui permet de fermer une boîte de dialogue en cliquant en dehors de celle-ci que ce soit une boîte de dialogue modale ou non. Il supporte un ou plusieurs dialogues sur la même page.
plus d'informations ici: http://www.coheractio.com/blog/closing-jquery-ui-dialog-widget-when-clicking-outside
Laurent
j'utilise cette solution basée dans un posté ici:
var g_divOpenDialog = null;
function _openDlg(l_d) {
// http://stackoverflow.com/questions/2554779/jquery-ui-close-dialog-when-clicked-outside
jQuery('body').bind(
'click',
function(e){
if(
g_divOpenDialog!=null
&& !jQuery(e.target).is('.ui-dialog, a')
&& !jQuery(e.target).closest('.ui-dialog').length
){
_closeDlg();
}
}
);
setTimeout(function() {
g_divOpenDialog = l_d;
g_divOpenDialog.dialog();
}, 500);
}
function _closeDlg() {
jQuery('body').unbind('click');
g_divOpenDialog.dialog('close');
g_divOpenDialog.dialog('destroy');
g_divOpenDialog = null;
}
j'ai eu le même problème en faisant l'aperçu modal sur une page. Après beaucoup de googling j'ai trouvé cette solution très utile. Avec event et target il vérifie où click est arrivé et en fonction il déclenche l'action ou ne fait rien.
"151940920 Extrait de Code", le site de la Bibliothèque
$('#modal-background').mousedown(function(e) {
var clicked = $(e.target);
if (clicked.is('#modal-content') || clicked.parents().is('#modal-content'))
return;
} else {
$('#modal-background').hide();
}
});
C'est la seule méthode qui a fonctionné pour moi pour mon dialogue NON-MODAL""
$(document).mousedown(function(e) {
var clicked = $(e.target); // get the element clicked
if (clicked.is('#dlg') || clicked.parents().is('#dlg') || clicked.is('.ui-dialog-titlebar')) {
return; // click happened within the dialog, do nothing here
} else { // click was outside the dialog, so close it
$('#dlg').dialog("close");
}
});
Tout le crédit va à l'Essieu
Cliquez à l'extérieur de dialogue non modale fermer
c'est simple en fait vous n'avez pas besoin de plugins, juste jquery ou vous pouvez le faire avec javascript simple.
$('#dialog').on('click', function(e){
e.stopPropagation();
});
$(document.body).on('click', function(e){
master.hide();
});
Je ne pense pas que trouver des choses de dialogue en utilisant $('.tout-sélecteur") de L'ensemble du DOM est si lumineux.
Essayer
$('<div />').dialog({
open: function(event, ui){
var ins = $(this).dialog('instance');
var overlay = ins.overlay;
overlay.off('click').on('click', {$dialog: $(this)}, function(event){
event.data.$dialog.dialog('close');
});
}
});
vous obtenez vraiment la superposition à partir de l'instance de dialogue à laquelle elle appartient, les choses ne vont jamais mal de cette façon.
avec le code suivant, vous pouvez simuler un clic sur le bouton "Fermer" de la boîte de dialogue (changez la chaîne "MY_DIALOG" pour le nom de votre propre boîte de dialogue)
$("div[aria-labelledby='ui-dialog-title-MY_DIALOG'] div.ui-helper-clearfix a.ui-dialog-titlebar-close")[0].click();
Code Intelligent: J'utilise le code suivant pour que chaque chose reste claire et lisible. le corps latéral fermera la boîte de dialogue.
$(document).ready(function () {
$('body').on('click', '.ui-widget-overlay', closeDialogBox);
});
function closeDialogBox() {
$('#dialog-message').dialog('close');
}