Mostrar ventana modal al cargar página con Shadowbox
En este artículo vas a descubrir como mostrar una ventana modal al cargar la página utilizando el plugin Shadowbox y la función setTimeout() de JavaScript.
Shadowbox es un clon de Lightbox pero, a diferencia de éste no sólo sirve para visualizar imágenes en ventanas modales, sino también páginas web, archivos en flash, galerías, mapas, y vídeos en varios formatos de distintos servicios.
Mostrar una ventana modal al cargar una página puede ser especialmente interesante utilizarlo para mostrar una oferta importante que deseas que aparezca al entrar en una tienda virtual, mostrar un formulario para suscribirse a la newsletter de un blog o mostrar cualquier información que el usuario debe saber si o si al navegar por el sitio web.
En el ejemplo que voy a ilustrar estoy mostrando una ventana modal con Shadowbox al entrar en la página. Después de medio segundo se ejecuta la apertura de una ventana modal utilizando el plugin Shadowbox. El aspecto es similar a la siguiente imagen:
En la cabecera de la página o dentro de la etiqueta <head> agrega los estilos necesarios, la librería jQuery, la llamada al plugin y la llamada a la función setTimeout de la siguiente forma:
<link rel="stylesheet" href="css/shadowbox.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({ language: "es", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] });
setTimeout(function() {
Shadowbox.open({
content: '<div class="example"><img src="images/oferta.jpg"></div>',
player: "html",
title: "Oferta",
width: 492,
height: 370
});
}, 500);
</script>Este código también puedes ser incluido antes de la etiquta de cierre </body>.
Los archivos relacionados con el plugin Shadowbox los puedes encontrar en la página oficial de Shadowbox o también puedes descargarlo del código de ejemplo.
El código anterior lo que hace es inicializar el plugin Shadowbox con algunos parámetros que nos interesan para la demostración. Ver todas las opciones del plugin Shadowbox.
Y, luego, utilizando la función setTimeout() de JavaScript, abro la ventana Shadowbox después de medio segundo.
El plugin Shadowbox tiene muchas opciones. En el ejemplo en funcionamiento estoy utilizando 5 opciones:
- content: Para armar el contenido de la ventana. En el caso del ejemplo tan solo es un contenedor con una imagen dentro.
- player: Para indicar el tipo de contenido que se va a abrir en la ventana modal.
- title: Para especificar un título para la ventana modal.
- width: establecido en 492px para indicar el ancho de la ventana modal.
- height: establecido en 370px para indicar el alto de la ventana modal.
Autor
¿Buscas trabajo de programador?
53 respuestas a “Mostrar ventana modal al cargar página con Shadowbox”
Deja una respuesta
99 artículos que te podrían interesar
Ver más sobre
hola tengo un problema tengo mi pagina web y no se como insertar esta ventana modal.
Buenas alguien me puede ayudar no me aparece la X de cerrar, gracias
Buenas tardes jose aguilar, sera que puedes pasarme los 2 archivos de js(jquery-1.4.2.min.js y shadowbox.js) para solucionar mi problema de pagina ya que solo eso ma falta para solucionar mi prob.. favor espero tu respuesta y si puedes enviarme los archivos te lo agradeceria.
Hola, si vas al ejemplo en funcionamiento y pulsas con el botón derecho del ratón podrás ver el código fuente de la página, pulsando en los archivos incluidos en la cabecera, te los puedes guardar.
Gracias me sirvio mucho tu tuorial, la pregunta ahora que tengo es que la quiero aplicar en un formulario inicial con el iframe funciona pero es un archivo php externo, lo que quiero es que este cargado en la pagina principal, crees que se pueda? saludos y gracias!!!
Hola que tal? soy nueva con el uso de JQuery, pude cargar todo bien, salio perfecto, pero la imagen se ve con un margen inferior negro de un 10px aprox. Que estaré haciendo mal? Espero puedan ayudarme, muchas gracias 🙂
este es mi cod:
»
$(document).ready(function(){
setTimeout(function() {
Shadowbox.open({
content: ‘ ‘,
player: «html»,
width: 600,
height: 800,
});
}, 50);
});»
pd: la hoja de estilos esta bien linkeada 🙂
Si nos facilitas el enlace de la web lo podríamos inspeccionar. saludos
Quisiera compartir para cerrar automaticamente despues de cierto tiempo sería:
width: 492,
height: 367
});
}, 50);
//este es el tiempo en que se cierra automaticamente , 4000 = 4seg
setTimeout(function(){ Shadowbox.close() }, 4000);
});
Espero les sea de utilidad
Hola Jose Aguilar, funciona muy bien pero cada vez que entro a la pagina ya sea regresando vuelve a cargar el video, donde coloco las variables de sesion o cual es el archivo que modifico para evitar que vuelva aparecer ?
HOla tienes que buscar como utilizar una cookie con jQuery. Posiblemente eso te puede servir.
Como estas jose quisiera que aportaras otros sitios donde descargar el contenido de shadowbox porque la pagina no esta online. Esta herramienta es de gran ayuda para un proyecto que estoy haciendo..
gracias espero tu respuesta
Hola buenas tardes,
Creo que ahora se puede descargar de aquí:
https://github.com/mjackson/shadowbox
Y sino copiar el código fuente del ejemplo en funcionamiento
Saludos
Buen tutorial =)
Y misma duda que Emerson… Cómo haces para que sólo aparezca una vez?
Por ejemplo, lo incluyo en un index.php… pero aparece en todas las páginas que crea index.php… Cómo se «desactiva» en éstas? Algún display: none en éstas tal vez?
Gracias, salut!
Hola que pena contigo pero no entendí, te envío la url de la web para que mires que cada vez que cambio de pestaña se carga nuevamente.
http://www.deca.com.co/
prueba cambiando de pestaña y veras. Gracias
Buenas amigo como hago para que solo se cargue la primera vez, ya que cuando cambian de sección se sigue cargando. Gracias
Hola, como hiciste para que solo te apareciera en el Index la vetanana modal y no en los otros links de la pagina… Agradezco tu ayuda
Hola, en el ejemplo no hemos puesto en práctica lo que comentas pero no sería muy difícil averiguar en que página estás para condicionar la apertura del popup o no. Dependiendo la plataforma que estés utilizando será de una forma u otra. Si es programación a medida con PHP puedes jugar con la variable global: $_SERVER[‘PHP_SELF’]
Buenas amigo quisiera saber como funciona la misma ventana modal pero con varias imágenes en carrusel? Gracias
Hola, no lo he probado nunca pero lo primero que probaría sería:
1- Añadir los divs o tags html del carousel dentro del content del shadowbox.
2- Realizar la llamada al plugin carousel como se suele hacer.
Y si son compatibles debería funcionar.
Hola que pena contigo pero no entendí, te envío la url de la web para que mires que cada vez que cambio de pestaña se carga nuevamente.
http://www.deca.com.co/
prueba cambiando de pestaña y veras. Gracias
Buen aporte.
Pero podrias decirme como hacer para que se cierre automaticamente cuando mi pagina por detras termine de cargar.
Ej.
Utilizo un php que de devuelve una consulta personalizada de mi BD. cuando le doy mostras me «Tarda» un tiempo de ejecucion como de 50 Seg.
Quisiera usar tu ejemplo para hacer una pantalla de «Cargando» y se cierre al terminar mi consulta.
Buenos dias, quisiera consultarle soy nueva en esto y me gustaría que me aparezca al inicio de mi pagina un anuncio donde debo de colocar cada parte del código que usted nos da de ejemplo, como debo rebombar los archivos, muchas gracias por su comentario
Cómo modifico el opacity de la página, para hacerlo un poco más obscuro.
Resulta que mi web tiene colores muy vivos y no se distingue en su totalidad el popup.
Gracias!!!
Hola buenas tardes,
En principio al plugin le puedes modificar la siguiente variable overlayOpacity.
Todas las opciones del plugin están aqui –> http://www.shadowbox-js.com/options.html
Saludos
Gracias , Magnifico ejemplo , me sirvio para video y html en un diseño que necesitaba .
Excelente ejemplo pero tengo una consulta.
tengo una imagen de 500×600 px y no he logrado que aparezca completa la primera vez que carga la pagina, existe alguna manipulación extra a los css o al js
Hola, estoy buscando un modulo que me muestre simplemente una imagen, sin cuadro, sin textos, solo la imagen con la X para cerrarla.
He probado varios pero todos vienen con adornos que tengo que eliminar editando el css y no hay forma, ¿conocéis alguno?.
La Verdad Que no me Sale la imagen me sale en la misma web pero no cargada si no al costado de las letras
a que se debe por favor ayudenme
Gracias por la ayuda
Saludos
Buenas, me sucedia lo mismo de que no se me abria la imagen y despues de revisar y revisar note q habia descargado el shadowbox de manera incorrecta. Para las personas que les sucedio esto, deben tildar en la parte de descarga de la pagina de shadowbox la opcion de Images y la de Inline and/or dynamic HTML y proceder a descargar. Por lo menos ese era el mega error q estaba cometiendo yo.
Muchas gracias por esta ayuda Jose Aguilar =)
una imagen ya se abre pero no me funciona un pàgina web.
me puedes explicar como llamar a una pagina php con paràmetros?
gràcias
donde se agregan los estilos
En la hoja de estilos que estés utilizando
Hola tengo el mismo problema que Cursor; me da la sombra del shadowbox pero no me muestra la imagen, intenté con un iframe colocando el contenido en un HTML y por supuesto cambiando le propiedad en player pero nada, colocando, probé de igual forma con img y tampoco. :'(
Subí el html y lo inserte con una liga dura y nada. Incluso coloco una dirección cualquiera y tampoco carga. No se en donde está el error.
En este momento lo tengo con un iframe y el archivo on line para evitar esto de las fallas de las rutas y esas cosas.
Espero puedan ayudarme por que ya no sé que hacer.
El código que tengo en el head es el siguiente:
Shadowbox.init({ language: «es», players: [‘img’, ‘html’, ‘iframe’, ‘qt’, ‘wmp’, ‘swf’, ‘flv’] });
$(document).ready(function(){
setTimeout(function() {
Shadowbox.open({
content: »,
player: «iframe»,
title: «Aviso»,
width: 800,
height: 600,
});
}, 50);
});
Gracias
pásanos la url que lo veamos!
lo he hecho igual que el ejemplo y nada no me carga la imagen
me funciona a medias… me da la sombra del shadowbox pero no me muestra la imagen (la url esta correcta)
¿alguna idea?
indicanos la url del tu ejemplo para verlo
Hola,
mi pregunta es la siguiente.
¿Se puede hacer que la modal solo aparezca una vez por sesión?
Es decir que si el usuario vuelve a la home que es donde muestro la modal, no vuelva aparecer.
Gracias y un saludo!!
Hola José,
muy bueno tu tutorial. Pero quisiera hacerte dos pregunticas ¿Cómo hago para adaptar el tamaño de la imagen a cualquier resolución de pantalla? y ¿Cómo hago para que la ventana modal se cierre sola después de 8 segundos?
Muchas gracias de antemano,
Ángela
Buenas noches, mi nombre es Mauro, tuve que utilizar este tipo de ventana modal para mostrar una imagen al cargar el sitio y me encontré con el problema que las imágenes que no son abiertas mediante un enlace, no eran dimensionadas, no encontré material de ayuda disponible y vi también que varios tenían al mismo inconveniente, así que me puse manos a la obra por mi cuenta y descubrí la solución.
De echo es tan simple pero me llevo 3 horas descubrirla.
aqui va la solucion:
cuando abrimos la ventana modal
$(document).ready(function(){
setTimeout(function() {
Shadowbox.open({
content: »,
player: «html»,
title: «Oferta»,
width: 492,
height: 367
});
}, 50);
});
en la fila del content :
content: »,
debemos expresar que las medidas de la imagen sean en porcentaje y quitamos el div, quedaría de la siguiente forma:
content: »,
y listo.
puede ver mi ejemplo funcionando en Davinci CAF</a
Me funciona la imagen me aparece del tamaño que le coloque pero el problema es que el botón cerrar no me aparece, donde debo de modificar esa parte, me puede ayudar?
HOla, posiblemente te falte el archivo shadowbox.css, puede ser?
Gracias Jose!! (mi 4º comentario fallido)
Lo que quiero hacer es es ampliar las imágenes mediante un evento, es decir, por ejemplo: <img src=… onclick=\"ampliar\">
¿Cómo seía el código Jquery? (Shadowbox.open -> al abrir página, y con evento onclick)
Un saludo\"!!
NOTA: este es mi tercer intento de comentario
Gracias Jose!! (mi 4º comentario fallido)
Lo que quiero hacer es es ampliar las imágenes mediante un evento, es decir, por ejemplo:
¿Cómo seía el código Jquery? (Shadowbox.open -> al abrir página, y con evento onclick)
Un saludo»!!
NOTA: este es mi tercer intento de comentario
Gracias Jose !!
Mira quiero hacer lo siguiente…
Quiero que la imagen se amplíe no cuando se ejecute por primera vez el código (.open) sino cuando haga <strong>clic</strong> sobre la imágen.
Mediante un evento \"onclick\" de la imágen llamar a la función jQuery <u>Shadowbox.open({</u>
Pero ¿Cómo la llamo?…
Gracias por tu tiempo !!
Hola Jose!!!
Me puedes responder a una duda que tengo sobre este ejemplo?¿?¿
Un Saludo!!
si, claro
Hola Jose, sabes si se puede hacer que no bloquee la pagina de atras?
necesito poner una imagen como esa en un lateral derecho pero sin bloquear la pagina ppal
gracias!
Muchas gracias, me sirvió mucho
Muchas gracias José..!
inserte el SWF con iframe y funciono…solo desapareció la X para cerrar pero ya es un detalle.!
Saludos
Excelente tutorial.. me ha servido increíblemente… pero como puedo hacer que se vea una animación swf en vez de una foto de oferta del ejemplo?
gracias.!
Hola José,
No se si habrás probado de editar el atributo content del shadowbox:
setTimeout(function() {
Shadowbox.open({
content: ‘
‘,
player: «html»,
title: «Oferta»,
width: 492,
height: 367
});
}, 50);
En el ejemplo es un div con una imagen, mirar a ver si puedes meter el código del swf