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ó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í 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ó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í...
Acá bajamos un poco la barrita y está el espacio en blanco
Si le quito el DIV del pop up se vé normal el footer (obviamente no andaría el pop up)
Y acá una imágen del pop up abierto
Censuro algunas cosas porque son datos reales