28116 sujets

CSS et mise en forme, CSS3

[Résolu] Fenêtre modale qui ne se ferme pas lors d'un clic.

Bonsoir,
J'ai un petit soucis, c'est que j'ai une modale qui fonctionne à merveille, mais j'y ai mis un slider. Pour le coup, si on clique sur une imagette pour la voir en grand, la fenêtre se referme.
Je vous donne les CSS (il n'y a pas de js) :
.oModal {
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
  overflow-y: auto;
}


.oModal:target {
  opacity:1;
  pointer-events: auto;
}

.oModal:target > div {
  margin:5% auto;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
}

.oModal > div {
  max-width: 60%;
  position: relative;
  margin: 1% auto;
  padding: 8px 8px 8px 8px;
  border-radius: 5px;
  background: white;
  transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  overflow-y: auto;
}
}

Si vous pouviez m'aider. Merci !
ED
Bonjour,
Le problème est que les imagettes se transforment en boutons close. Je n'y comprends rien Smiley bawling
Ci-dessous mon HTML :
<div id="oModal" class="oModal">
  <div><p><a href="#fermer"><i class="fa fa-times orange btn"></i></a></p>   
<div class="cv_header">
        <h1>CV</h1>
    </div>
    
<div class="section_cv">
        <div class="photo_cv">
            <img src="imgs/dmitriBel.jpg" alt="Photo de profil">
        </div>
        <div class="prez">
            <h2>Qui suis-je ?</h2>
          <p>NYS texte.</p></div>
<div class="cadre_diapo">
<div class="interieur_diapo">
<div class=description><span>description1</span><img src="./imgs/dmitri.jpg" alt></div>
<div class=description><span>description2</span><img src="./imgs/dmitri.jpg" alt></div>
<div class=description><span>description3</span><img src="./imgs/dmitri.jpg" alt></div>
<div class=description><span>description4</span><img src="./imgs/dmitri.jpg" alt></div>
</div>
<ul class="navigation_diapo">
<li><a href="#votre_id1"><img src="./imgs/dmitri.jpg" alt></a></li>
<li><a href="#votre_id2"><img src="./imgs/dmitri.jpg" alt></a></li>
<li><a href="#votre_id3"><img src="./imgs/dmitri.jpg" alt></a></li>
<li><a href="#votre_id4"><img src="./imgs/dmitri.jpg" alt></a></li>

</ul>
</div></div>

Merci,
ED
Modérateur
Bonjour,

c'est la logique de ton script basé sur :target qui referme ta modale.

Tu as un lien #fermer , qui te sert à refermer ta modale, en cliquant sur ce lien, #oModal n'est plus dans ton url et le selecteur #oModal:target n'est plus applicable.
C'est exactement la même chose qui se passe en cliquant sur #votre_id1 ou n'importe quelle autre ancre dans la page.

Il te faut repenser la méthode, en utilisant autrement ou autre chose que :target ou te servir de JavaScript en appliquant ou retirant une class sur #oModal et les images à afficher.

Cdt
Modifié par gcyrillus (01 May 2022 - 15:20)
Meilleure solution
Merci beaucoup gcyrillus, mais que puis-je utiliser d'autre que :target ?
Bonne fin de week-end,
E.
Modérateur
Tu peut te servir de :focus ou d’éléments de formulaire.

par exemple avec :focus sur ton code repris en partie ( surement sans rapport avec ton visuel) https://jsfiddle.net/e9r43zx2/1/

Il y a aussi l'option d'utiliser des éléments de formulaire et se servir du sélecteur :checked

quelques exemples en :focus ou :checked sur d'ancien codepen test que j'avais fait : https://codepen.io/collection/nVWzND?cursor=ZD0xJm89MSZwPTEmdj0z
(ceux utilisant des images de lorempixel.com peuvent sembler ne pas fonctionner, ce site est souvent saturé)

Cdt

edit : deux lectures à faire pour completer tes recherches sur :focus https://www.alsacreations.com/astuce/lire/1834-le-coup-de-pouce-accessibilite-de-focus-visible.html et https://www.alsacreations.com/astuce/lire/1150-Reset-CSS-et-outline--attention.html et sur l'attribut tabindex : https://www.alsacreations.com/article/lire/570-Histoire-de-tabindex.html (Pour le choix de la valeur 0 , voir le premier point de la conclusion, l'idée ici est d'ajouter des points focusables et pas de faire faire du yoyo à ton contenu)
Modifié par gcyrillus (01 May 2022 - 16:33)
Merci gcyrillus... problème de conflit(s) de :target ?
J'abandonne ce slider pour en adopter un autre plus adéquate.
Merci beaucoup !
ED
Sujet clos
Aller à