Comment fermer les outils de jQuery Overlay sur un clic, peu importe où?

Question

J'ai ajouté le Overlay effect de jQuery Tools à mon site, en utilisant la "configuration minimale". Malheureusement, lorsque l'utilisateur veut le fermer, il doit cibler ce petit cercle en haut à droite. L'utilisabilité souffre de cette façon. Ce serait bien mieux si l'utilisateur pouvait simplement cliquer n'importe où pour le fermer. Puis-je modifier ou ajouter du code afin de fermer la superposition quel que soit l'emplacement des clics de l'utilisateur? Ou peut-être quand il clique en dehors de la superposition? Je n'ai trouvé aucune note à ce sujet dans les documents.

Answer 1

Ou peut-être quand il clique en dehors de la superposition?
Vérifiez the docs (partie 'Configuration'):

closeOnClick (par défaut: true)
Par défaut, les superpositions sont fermés lorsque la souris est cliqué en dehors de la zone de superposition. La définition de cette propriété sur false supprime ce comportement qui convient aux boîtes de dialogue modales.

Cette fonctionnalité est déjà activée par défaut. Si cela ne fonctionne pas, vous pouvez nous montrer votre configuration de superposition.

Answer 2

essayer (rapide et sale):

$(document).click(function(){ 
    $('.simple_overlay:visible .close').click(); 
}); 

Answer 3

@NikitaRybak Le closeOnClick fonctionne uniquement lorsque vous utilisez un masque d'exposition. J'ai modifié le code de recouvrement pour travailler sans exposer/masque ..

Tidy le javascript minified .. trouver ce dans le code minified:

b.closeOnClick && a(document).bind("click." + n, function(l) { 

et insérez ce à la fonction à la place

if (!a(l.target).hasClass('overlay') && !a(l.target).hasClass('apple') && !a(l.target).parents('.overlay', f).length && !a(l.target).parents('[rel="#' + a(f).attr('id') + '"]').length && !(a(l.target).attr('rel') == '#' + a(f).attr('id'))) { c.close(l); } 

maintenant, si vous utilisez l'effet de pomme, trouver dans le code de l'effet de pomme:

b = h('<img src="' + b + '"/>'); 

et insérer class = "pomme" il devient:

b = h('<img class="apple" src="' + b + '"/>'); 

Hope this helps si quelqu'un en a besoin ..

Answer 4

Au cours de mes expériences, je trouve que même official jQuery Tools standalone demo ne ferme pas correctement overlay. Par exemple, lorsque je clique sous l'image superposée, elle se ferme mais lorsque je clique sur le côté droit ou gauche en dehors de la superposition, elle ne se ferme pas.

Donc, dans mon cas je solution suivante pour fermer overlay sur clic n'importe où sur le document:

<script type="text/javascript"> 
    function closeOverlay(){ 
     $('.overlay:visible .close').click(); 
    } 
    document.addEventListener('click',closeOverlay,true); 
</script> 

Peut être qu'il est sale aussi, mais ça fonctionne pour moi.