angel1998
Gamma
Redactor
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Los malnombrados pop up’s, aunque tengan mala reputación no tienen porqué ser un incordio a la hora de navegar por internet sino todo lo contrario, nos pueden ayudar mucho a hacer nuestras páginas web más usables y atractivas para el usuario.
Otros nombres:
- Ventana emergente
- Modal frame
- Modal window
- Dialog box
- Ventana o caja de diálogo
- …
Veamos primero un ejemplo de nuestro pop up o ventana emergente (modal frame):
Ejemplo de pop up
¿Elegante verdad?
Ahora vamos a describir paso a paso el procedimiento:
1- Descargamos los archivos necesarios aquí* y los subimos a nuestro servidor:
- demo.css
- demo.js
- jquery-1.7.1.min.js
DESCARGAR ARCHIVOS PINCHANDO AQUI
2- Llamámos a la hoja de estilos CSS para que nuestro pup up (ventana emergente) tenga el aspecto que deseamos:
<link rel=”stylesheet” href=”demo.css”>
Asegúrate que indicas la ruta correcta dónde se encuentra tu archivo demo.css (en este caso está en la misma carpeta que el archivo donde queremos el popup)
Evidentemente, editando la hoja de estilo podras personalizar el aspecto de tu pop up.
3- Creamos el botón que disparará el pop up:
Utiliza este código para usar el efecto Zoom in
<input type=”button” value=”Pop up en Zoom In” data-type=”zoomin” />
O si lo prefieres utiliza este par el efecto Zoom out:
<input type=”button” value=”Pop up en Zoom Out” data-type=”zoomout” />
4- Creamos el contenido que se verá cuando la ventana emergente esté abierta:
5- Llamámos al archivo demo.js para que nuestro pop up tenga estos efectos tan atractivos y activamos el JQuery:
Simplemente pega este código antes de la etiqueta </body> de tu página html.
Espero que os haya gustado y servido este tutorial, dudas en comentarios y darle me agrada si os sirvió!
Otros nombres:
- Ventana emergente
- Modal frame
- Modal window
- Dialog box
- Ventana o caja de diálogo
- …
Veamos primero un ejemplo de nuestro pop up o ventana emergente (modal frame):
Ejemplo de pop up
¿Elegante verdad?
Ahora vamos a describir paso a paso el procedimiento:
1- Descargamos los archivos necesarios aquí* y los subimos a nuestro servidor:
- demo.css
- demo.js
- jquery-1.7.1.min.js
DESCARGAR ARCHIVOS PINCHANDO AQUI
2- Llamámos a la hoja de estilos CSS para que nuestro pup up (ventana emergente) tenga el aspecto que deseamos:
<link rel=”stylesheet” href=”demo.css”>
Asegúrate que indicas la ruta correcta dónde se encuentra tu archivo demo.css (en este caso está en la misma carpeta que el archivo donde queremos el popup)
Evidentemente, editando la hoja de estilo podras personalizar el aspecto de tu pop up.
3- Creamos el botón que disparará el pop up:
Utiliza este código para usar el efecto Zoom in
<input type=”button” value=”Pop up en Zoom In” data-type=”zoomin” />
O si lo prefieres utiliza este par el efecto Zoom out:
<input type=”button” value=”Pop up en Zoom Out” data-type=”zoomout” />
4- Creamos el contenido que se verá cuando la ventana emergente esté abierta:
HTML:
<div class=”overlay-container”>
<div class="window-container zoomin">
<h3>Versión en Zoom in</h3>
Texto de la ventana emergente<br/>
<br/>
<span>Cerrar</span>
</div>5- Llamámos al archivo demo.js para que nuestro pop up tenga estos efectos tan atractivos y activamos el JQuery:
HTML:
<script>!window.jQuery && document.write(unescape('%3Cscript src=”jquery-1.7.1.min.js”%3E%3C/script%3E'))</script>
<script type="text/javascript" src="demo.js"></script>Espero que os haya gustado y servido este tutorial, dudas en comentarios y darle me agrada si os sirvió!
