Ne pas afficher le message modal

Question

J'essaie d'afficher un message modal lorsque l'utilisateur clique sur le bouton en utilisant uniquement le CSS. Lorsque j'essaie d'ajouter ce bouton à une division, le bouton ne fonctionne plus. Pourquoi?

$colore = #2767ce 
 

 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
    float: center; 
 
} 
 

 
.box { 
 
    width: 220px; 
 
    float: center; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    margin-right: 10px; 
 
    margin-left: 10px; 
 
    border: 3px solid $colore; 
 
    padding: 10px; 
 
} 
 

 
.box p { 
 
    font-family: sans-serif; 
 
    font-size: 15px; 
 
    margin-bottom: 40px; 
 
    margin-top: 40px; 
 
} 
 
    
 
.scopri { 
 
    display: block; 
 
    padding: 1em 2em; 
 
    background: $colore; 
 
    color: #fff; 
 
    border: 3px solid $colore; 
 
    outline: 0; 
 
    float: center; 
 
    margin: 0 auto; 
 
    text-transform: uppercase; 
 
    cursor: pointer; 
 
    transition: .6s ease; 
 
    -webkit-appearance: none; 
 
    
 
    &:hover { 
 
    background: white; 
 
    color: $colore; 
 
    border: 3px solid $colore; 
 
    } 
 
    } 
 
    
 
.modalita { 
 
    opacity: 0; 
 
    visibility: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0,0,0,0.7); 
 
    transition: .3s ease-in-out; 
 
    
 
    &_box { 
 
    padding: 1em; 
 
    background: white; 
 
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.2); 
 
    text-align: center; 
 
    transition: all .3s cubic-bezier(.20,.90,.30,1.5); 
 
    transform: rotate(5deg) translate(-1em,1em); 
 
    border-top: 5px solid $colore; 
 
    border-bottom: 5px solid #ddd; 
 
    } 
 
} 
 
    
 
/* modal magic */ 
 
.scopri:focus + .modalita { 
 
    opacity: 1; 
 
    visibility: visible; 
 
} 
 
    
 
    .modalita_box { 
 
    transform: rotate(0deg) translate(0,0); 
 
    }

<div class="box"> 
 
    <h2>HUB</h2> 
 
    <p>test</p> 
 
<button class="scopri"> more </button> 
 
</div> 
 

 
<div class="modalita"> 
 
    <div class="modalita_box"> 
 
    <p> try </p> 
 
    </div> 
 
</div>

PS: si vous essayez de supprimer la division cela fonctionne, mais je ne sais pas pourquoi!

Answer 1

En utilisant des pseudo-classes comme dans ce cas, le modalita doit être un frère direct ou indirect de l'élément qui a la pseudo-classe (scopri dans ce cas). C'est parce que les sélecteurs enfants/frères CSS sont assez restrictifs.

Vous pouvez l'utiliser comme ceci:

<div class="box"> 
    <h2>HUB</h2> 
    <p>test</p> 
<button class="scopri"> more </button> 

<div class="modalita"> 
    <div class="modalita_box"> 
     <p> try </p> 
    </div> 
</div> 

</div> <!-- closing .box --> 

Answer 2

Le symbole + utilisé dans .scopri:focus + .modalita { est le Adjacent sibling selector, qui ne peut s'appliquer qu'aux éléments frères.

Le bouton .scopri est imbriqué dans la div .box, donc .scopri et .modalita ne sont pas frères et soeurs.

Si vous déplacez le bouton .scopri en dehors de la .box div, comme suit:

<div class="box"> 
    <h2>HUB</h2> 
    <p>test</p> 
</div> 
<button class="scopri"> more </button> 

Ensuite, votre code devrait fonctionner comme prévu à nouveau.