28172 sujets

CSS et mise en forme, CSS3

[Résolu] Fermer lightbox par simple clic (sans bouton)

Bonjour,

J'ai bricolé tant bien que mal un site généreusement pourvu en lightboxes que je cherche à fermer par un simple clic au dehors et non une affreuse croix (sorry pour les amateurs).
Je suis novice et ne m'y retrouve pas trop entre les différentes propositions glanées sur le net...

Un grand merci d'avance pour tout indice

L'adresse du site :
http://dong-xi.net/

et le bout de code de la lightbox:

HTML  SCSS   Result
Edit on 

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background:;
width: 100%;
background-opacity: %;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
position: fixed;
bottom: 0px;
left: 15%;
max-height: 0%;
max-width: 0%;
border: 0px solid white;
box-shadow: none;
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */

.lightbox-target:target {
opacity: 1;
top: 0;
bottom: 0;
}

.lightbox-target:target img {
position: fixed;
left:15%;
bottom:0%;
max-height: 60%;
max-width: 70%;
}

.lightbox-target:target a.lightbox-close {
top: 0px;
}

.lienAfficher
{
    cursor: pointer;
}
Super, merci à toi!

J'ai donc inséré cette ligne dans la <head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

et le script dans le code html, pour chaque image :

<script>
$( "#grandeimage" ).click(function() {
$( "#grandeimage" ).fadeOut();
});
</script>

comme cette commande ne fonctionnait qu'une fois, j'ai ajouté :

<script>
$( "#icône" ).click(function() {
$( "#grandeimage" ).show();
$( "#log" ).empty();
});
</script>

et la manipulation ouvrir/fermer peut se faire à l'infini!

Le seul hic est que je ne peux fermer certains visuels qu'en cliquant dessus et pas autour...
Y a-t-il un bout de code qui permet de fermer la lightbox en cliquant n'importe où sur l'écran?
Salut,

et avec ça c'est mieux ?


$(window).mouseup(function(e){
  var box = ('#box'); // ton sélecteur
if(!$(box).is(e.target) && $(box).has(e.target).length == 0){
  $(box).fadeOut();
}
})
Tardivement... :

Oui ça fonctionne parfaitement pour les visuels avec lesquels ça coinçait précédemment...mais plus pour ceux avec lesquels ça marchait! Smiley biggrin
Je dois avoir fait quelque chose de travers... mais quoi qu'il en soit j'utilise les deux scripts et tout (ou presque) fonctionne.

Un grand merci à toi!!
Sujet clos
Aller à