3

me encuentro haciendo una web y la verdad nunca tuve conocimientos de hacer pop ups, entonces me puse a buscar y mas o menos tengo lo que quiero pero me da un problema..

Éste es el div del pop up

<div class="modal-wrapper" id="popup">
    <div class="popup-contenedor">

        <h2>Esta es nuestra ubicaci&oacute;n!</h2>
        <iframe src="ACÁ LA URL DEL IFRAME QUE LA QUITO POR PRIVACIDAD" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
        <a title="Pulse aqu&iacute; para cerrar" class="popup-cerrar" href="#footer-wrapper"><i class="fa fa-times-circle" aria-hidden="true"></i></a>
    </div>
</div>

Acá tengo la etiqueta que llamaría al pop up

                                        <li class="icon fa-home"><a title="Mostrar ubicaci&oacute;n en google maps" href="#popup" class="popup-link">
                                            UBICACIÓN
                                        </li>

Y acá tengo el CSS

#popup {
   visibility: hidden;
   opacity: 0;
   margin-top: -300px;
}
#popup:target {
   visibility:visible;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   transition:all 1s;
}
.popup-contenedor {
   position: relative;
   margin:7% auto;
   padding:30px 50px;
   background-color: #fafafa;
   color:#333;
   border-radius: 3px;
   width:50%;
}
a.popup-cerrar {
   position: absolute;
   top:10px;
   right:10px;
   background-color: white;
   padding:7px 10px;
   font-size: 30px;
   text-decoration: none;
   line-height: 1;
   color: red;
}

Ahora, el problema radica en que el DIV del pop up, me deja un espacio en blanco en el footer de la web digamos...

Algo así...

introducir la descripción de la imagen aquí

Acá bajamos un poco la barrita y está el espacio en blanco

introducir la descripción de la imagen aquí

Si le quito el DIV del pop up se vé normal el footer (obviamente no andaría el pop up)

introducir la descripción de la imagen aquí

Y acá una imágen del pop up abierto

introducir la descripción de la imagen aquí

Censuro algunas cosas porque son datos reales

1 respuesta 1

1

El problema radica en la propiedad visibility de css, lo cual no muestra el elemento en la pagina pero si ocupa espacio.

Reemplaza visibility:hidden por display:none

Su comportamiento es el mismo con la diferencia que display:none no ocupa espacio en la pagina.

Para mostrar el elemento, usa display:block o display:inline-block en lugar de visibility:visible

#popup {
   display: none;
   opacity: 0;
   margin-top: -300px;
}
#popup:target {
   display:block;
   opacity: 1;
   background-color: rgba(0,0,0,0.8);
   position: fixed;
   top:0;
   left:0;
   right:0;
   bottom:0;
   margin:0;
   z-index: 999;
   transition:all 1s;
}
1
  • Muchas gracias, me funcionó a la perfección, ¿ahora, me dices como puedo desactivar el scroll cuando esté abierto el popup y que te deje usar el scroll cuando el popup esté cerrado? Con Scroll me refiero a subir y bajar la página (barra gris de la derecha) el 23 mar. 2018 a las 1:22

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.