Con esta entrada, pretendo iniciar una serie de post que,
como el propio título indica, sea un conjunto de publicaciones con pequeños
fragmentos de código que se suelen utilizar en la mayoría de los proyectos. En este caso, el uso de un popup basico en html y javascript
Si al igual que yo, muchos de vosotros reutilizáis vuestro
código en múltiples proyectos, habréis descubierto lo engorroso que es ir
buscando en las carpetas de las aplicaciones archivadas, hasta descubrir dónde
se encuentra el dichoso código para después copiarlo y pegarlo en el nuevo.
Pues bien, intentando evitar la pérdida de ese tiempo
precioso, intentaré ir subiendo poco a poco ese tipo de código reutilizable, para tener aquí una
referencia en dónde buscarlo.
Y como inicio de esta sección os indicaré el código para
obtener de forma sencilla un popup general, que muestre un contenido concreto,
en forma de ventana emergente por encima del contenido de una página.
CODIGO HTML
Para empezar necesitaremos el fragmento de código HTML, que
genere las capas correspondientes tanto en ubicación como en contenido.
<div id="MiPopup"
class="popup">
<div class="popup_window">
<div class="popup_close"
title="Cerrar onclick="CierraPopup(this);">[cerrar]</div>
<div class="popup_contenido"></div>
</div>
</div>
Básicamente, la idea de este fragmento es la construcción de
una capa base (‘popup’), que ocultará todo el contenido bajo ella, y otra
centrada (‘popup_window’), con unas dimensones concretas que será la que
muestre el contenido.
Las dos capas internas de la ventana centras son para
separar el contenido a mostrar (‘popup_contenido’) del botón para cerrar el
popup (‘popup_cerrar’).
NOTA: El tag ‘onclick’ de la capa ‘popup_close’ será el
encargado de ocultar el popup al pulsarse. La función para realizarlo, la
puedes obtener más abajo.
CODIGO CSS
Una vez que tenemos la estructura general montada, debemos
darle el estilo CSS. Aquí está el código de ejemplo:
.popup {
background-color:rgba(0,0,0, 0.5);
display: none;
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 100000;
color:#fff;
}
.popup_window {
background-color:#333;
box-shadow:0 0 12px 12px #FFF;
height: 300px;
margin: -150px auto 0;
position: relative;
top: 50%;
width: 400px;
}
.popup_window > .popup_close {
cursor:pointer;
position:absolute;
right: 10px;
top: 10px;
}
.popup_window > .popup_contenido {
margin: 0 auto;
text-align: center;
width: 100%;
}
Evidentemente éste es solo un ejemplo, y en nuestro caso
hemos generado una ventana centrada de 400x300 pixels. Cualquier parámetro
puede ser modificado al gusto, e incluso podemos insertar imágenes de
background para personalizar aún más el resultado.
CODIGO Javascript
Por último, sólo nos faltaría implementar el javascript para
que la ventana se muestre y se oculte con la interacción del usuario. Para
esto, simplemente añadimos el siguiente javascript:
<script type="text/javascript">
function MuestraPopup(pop) {
document.getElementById(capa).style.display
= 'show';
}
function
CierraPopup(pop_close) {
pop_close.parentNode.parentNode.style.display
= 'none';
}
</script>
NOTA: Recomiendo utilizar algún framework de javascript, por
la comodidad de programación, estructuración y modelado del código.
Simplemente restaría añadir en la página HTML un botón para
mostrar dicho popup. Dado que se podría hacer de muchas formas, os indico la
más simple, que sería añadir un link en la página:
<a href="#" onclick="MuestraPopup('MiPopup'); return false;">Abrir
Pop-up</a>
NOTA: El return false;
lo añado para evitar que se ejecute la navegación del href y se recargue la
página.
Con este pequeño fragmento de código, ya podéis tener
vuestras propias ventanas informativas, sin peligro de bloqueos de popup, ni
nada por el estilo. Y además, totalmente personalizables.
Espero que os ayude.
¡Un saludo a todos!
No hay comentarios:
Publicar un comentario