 $('.pic > img').click(function() { var srcToCopy = $(this).attr('src'); $('body').find('.imgsrc').attr('src', srcToCopy); $('body').addClass('no-scroll'); $('#view').addClass("target"); }); $('#customlightbox-controls').on('click', function() { $('body').removeClass('no-scroll'); $('#view').removeClass("target"); });

 body { margin: 0; padding: 0; border: 0; height: 100%; width: 100%; } body.no-scroll { overflow: hidden; } .pic, #imgsrc { display: inline-block; } img { width: 100px } a { display: inline-block; line-height: 0; } .container { display: block; width: 100%; line-height: 0; } .customlightbox { top: 0%; bottom: 0%; box-sizing: border-box; position: fixed; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: -5; opacity: 0; } .customlightbox-imgwrap { width: 100%; height: 100%; padding: 20px; box-sizing: border-box; position: relative; text-align: center; } .customlightbox img { width: auto; margin: auto; max-width: 100%; max-height: 100%; opacity: 0; position: relative; top: 50%; transform: translateY(-50%); } #customlightbox-controls { box-sizing: border-box; position: fixed; height: 50px; width: 50px; top: -50px; right: -3px; z-index: 5; border-left: 2px solid white; border-bottom: 2px solid white; opacity: .7; } #close-customlightbox { display: block; position: absolute; overflow: hidden; height: 30px; width: 30px; right: 10px; top: 10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #close-customlightbox:before { content: ""; display: block; position: absolute; height: 0px; width: 2px; left: 14px; top: 0; background: white; border-radius: 2px; } #close-customlightbox:after { content: ""; display: block; position: absolute; width: 0px; height: 2px; top: 14px; left: 0; background: white; border-radius: 2px; } .customlightbox.target { z-index: 4; opacity: 1; display: inline-block; } .customlightbox.target img { opacity: 1; } .customlightbox.target~#customlightbox-controls { top: -3px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:after { width: 30px; } .customlightbox.target~#customlightbox-controls #close-customlightbox:before { height: 30px; } .lb-animate { -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -ms-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; }

Au vu de votre exemple, il semble que vous utilisiez le sélecteur de :target CSS :target pour gérer l’affichage et le masquage de la lightbox. Le sélecteur :target est appliqué à l’élément target de l’URL actuelle. Par conséquent, les modifications ne sont pas sockets en compte si vous ne modifiez pas l’URL.

Au lieu de modifier l’URL, changez tous les sélecteurs :target de votre CSS pour être des sélecteurs .target .

Ensuite, dans vos gestionnaires d’événements:

 $('.pic > img').click(function() { var srcToCopy = $(this).attr('src'); $('body').find('.imgsrc').attr('src', srcToCopy); $('body').addClass('no-scroll'); $('#view').addClass("target"); }); $('#customlightbox-controls').on('click', function() { $('body').removeClass('no-scroll'); $('#view').removeClass("target"); });

Désormais, lorsque vous cliquez sur une image, la target classe de style CSS est ajoutée à l’élément #view , ce qui provoque son apparition. Lorsque vous cliquez sur la zone Fermer, la classe target est supprimée et ils disparaissent.

Vous n’avez plus besoin de changer l’URL ou href , vous pouvez donc supprimer les balises d’ancrage pour #view et fermer pour #view sur #! .

Exemple de nouvelle instance Lightbox:

Changer pour fermer le contrôle de la visionneuse: