jQuery Girl
  1. jQuery Girl
  3. jQuery cacher en cliquant en dehors de div
Intereting Posts
Element.update n’est pas une fonction jQuery premier sélecteur de type? Comment ouvrir bootstrap modal avec succès ajax extension chrome – meilleure méthode pour réduire le temps de chargement lors de l’utilisation de scripts de contenu jQuery empêchant la publication sur un clic de bouton Boîte de dialog jQuery UI 1.10 – empêche l’insertion avant jQuery ajustant la hauteur de l’iframe Cloner et supprimer la ligne sélectionnée dans une autre table Comment empêcher un clic sur un ancre? Jquery: Comment obtenir la valeur td de la table dynamic? Jquery Isotope plugin: Générer des images de taille aléatoire Envoyer une publication HTTP interdomaine avec des formulaires HTML jquery datatables: met à jour la cellule du tableau après un clic sur un bouton Utilisation de Rails 3.2 et du formulaire Rails – Je ne sais pas comment afficher un champ de saisie lorsqu’un bouton d’option est coché et le masquer sinon $ (“Html”). ScrollLeft (valeur); ne fonctionne pas dans Chrome

jQuery cacher en cliquant en dehors de div

Bonjour,

J’essaie de faire un affichage JavaScript dynamic d’une image.

Voici mon code: 

  
  
  
   $('.info_image').click(function () { $('.info_image_click').show(); });

Lorsque quelqu’un clique sur “info_image” (c’est la petite image), il ouvre le “info_image_click” (c’est la grande image). Je ne sais pas comment les utilisateurs peuvent masquer “info_image_click” en cliquant en dehors du conteneur dans lequel il se trouve. Désolé de mon anglais 🙂

Essaye ça: 

 $('.info_image').click(function (e) { // Used to stop the event bubbling.. e.stopPropagation() $('.info_image_click').show(); }); // Hide the "info_image_click" by clicking outside container $(document).click(function () { $('.info_image_click').hide(); });

essayez d’utiliser 

 $(document).not('. info_image_click').click(function() { // Do your hiding stuff here. });

Ajouter un clic corporel:

Si possible, essayez de changer votre DOM , alors il n’y a pas besoin de jQuery également

Si vous voulez que votre image soit modale (la page ci-dessous est inactive jusqu’à ce que l’image soit masquée), vous pouvez créer une superposition invisible (avec une très petite opacité, typiquement 0,01) de même taille. de votre page, et la couvre, et a un z-index (une position “verticale”) entre celle de votre page (qui serait typiquement 0) et celle de votre zone “modale” (c’est-à-dire dans l’image info_image_click ), qui peut être plus grand que 0.

Vous définissez ensuite l’événement de clic de superposition de sorte que l’image et la superposition soient masquées lorsque l’utilisateur clique sur la superposition.

En faisant cela, vous vous assurez que lorsqu’un utilisateur clique sur la fenêtre, si rien ne se passe dans l’image, celle-ci obtiendra l’événement click qui n’est pas atsortingbué, car l’image est plus élevée. l’image, la superposition (et non la page, car elle a un indice z inférieur) obtiendra l’événement click et fera ce que vous voulez (masquez l’image et la superposition, revenant ainsi à la page principale).

Vous pouvez atsortingbuer à la superposition une opacité supérieure à 0,01 si vous souhaitez que cela soit un indice pour l’utilisateur que l’image est modale.

Brouillon rapide de la façon dont je le ferais dans jQuery: 

 showWindowModal: function(windowSelector) { $("
") .addClass("overlay") .appendTo($("#main")) .css({ width: $("#main").outerWidth(), height: $("#main").outerheight() }) .click(function() { $(windowSelector).remove(); $("#main > div.overlay").remove(); }); $(windowSelector).addClass("modal").show(); }

css classes: 

 #main > div.overlay { position: absolute; background: white; z-index: 100; opacity: 0.5; filter:alpha(opacity=50); /* For IE8 and earlier */ } .modal { z-index: 1000; }