Estoy intentando crear un pop-up sin usar javascript. Para ello he probado con un checkbox que va ligado a un label
. Cuando se pulsa sobre el label
el checkbox se activa o desactiva. En la parte de CSS, cuando el checkbox pase a estado checked
debería ocultarse, pero no lo hace. Dejo el fragmento que estoy usando:
#modal:checked ~ .contenido_popup_sociales {
display: none;
}
<div style='position:fixed;width:100%;height:100vh;display:flex;z-index:999999;background:rgba(0,0,0,0.8);' class="contenido_wrapper_sociales">
<div style='margin:auto;background:white;padding:20px;width:80%;max-width:400px;' class="contenido_popup_sociales">
<p style='text-align:center;'>Esto es un Pop-Up</p>
<input type="checkbox" id="modal">
<label id='btn-cerrar-sociales' for="modal">Cerrar</label>
</div>
</div>