0

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>

1

2 respuestas 2

0

El error porque no cierra tu Popup .contenido_popup_sociales es porque debe estar por debajo de tu botón cerrar o abrir, es decir, tu inputde tipo checkbox y tu label.

He modificado un poco el código, para crear un posible ejemplo solo usando CSS.

Ejemplo:

body {
  background-color: rgba(0, 0, 0, .8);
}


/* Invisible checkbox */

input[type=checkbox] {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}


/* Caja padre */

.holder {
  display: block;
  position: absolute;
  overflow: hidden;
  left: 50%;
  top: 50%;
  height: auto;
  width: 80%;
  max-width: 400px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}


/* Boton cerrar */

label[for=modal]:before {
  content: '\2717';
  position: absolute;
  display: block;
  left: 10px;
  top: 25px;
  margin: 1rem auto;
  color: Brown;
  z-index: 100000;
}


/* Boton cerrar hover */

label[for=modal]:hover:before {
  color: red;
}


/* Invisible popup */

#modal:checked~.contenido_popup_sociales {
  display: none;
}


/* Modificamos label despues de hacer click (se podria personalizar). */

#modal:checked+label[for=modal]:before {
  content: 'Abrir Popup';
  position: relative;
  left: 0;
  top: 0;
  border: 1px solid white;
  color: white;
  padding: 1rem;
  text-align: center;
  width: 90%;
  max-width: 400px;
}


/* Hover abrir Popup */

#modal:checked+label[for=modal]:hover:before {
  border: 1px solid grey;
  color: grey;
}


/* Estilos popup */

.contenido_popup_sociales {
  background-color: white;
  height: 70px;
  line-height: 70px;
}
<div class="holder">
  <!-- ¡Importante! que este por encima de la caja que se va cerrar (contenido_popup_sociales). -->
  <input type="checkbox" id="modal">
  <label id='btn-cerrar-sociales' for="modal">&nbsp;</label>

  <div class="contenido_popup_sociales">
    <p style='text-align:center;'>Esto es un Pop-Up</p>
  </div>

</div>

0

Buenas amigo en css hasta ahora no hay forma de que un hijo pueda acceder a su nodo padre en este caso lo que quieres no es posible porque el checkbox es un hijo del popup

lo puedes hacer con javascript o jquery

// jquery

$("#modal").change(function(){
  $(".contenido_wrapper_sociales").hide()
});


// javascript vanilla
function quitarpopup() {
  popup = querySelector("contenido_wrapper_sociales");
  popup.display = "none"
}
#modal:checked ~ .contenido_popup_sociales {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 jquery</label>
        
        <input type="checkbox" id="modal">
        <label id="btn-cerrar-sociales"  for="modal">Cerrar javascript</label>

    </div>
</div>

Adjunto de LibrosWeb

Actualmente no es posible seleccionar el padre de un elemento mediante CSS, ni siquiera con CSS3.

En el actual borrador de CSS 4 sí que se ha definido una pseudo-clase llamada :has() que funciona igual que jQuery. Aunque todavía no lo soporta ningún navegador (al menos en el momento de escribir este comentario, a mediados de 2014), este sería el código CSS4 que deberías utilizar:

li:has(> a.active) {
/* estos estilos se aplican al elemento <li>*/
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.