Shadowbox: Mostrar ventana modal al cargar página [Jquery] - Trucodigo

Shadowbox: Mostrar ventana modal al cargar página [Jquery]

Shadowbox: Mostrar ventana modal al cargar página [Jquery]





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 videos en varios formatos de distintos servicios.

En este artículo vamos a ver como abrir una ventana de información al cargar la página con Shadowbox y jQuery. Esto podría ser interesante por ejemplo para mostrar una oferta importante al entrar en una tienda virtual. El ejempo que vamos a ilustrar tratará de esto; mostrar una página Web dentro de un iframe.


Primero crearemos un archivo llamado index.html y colocaremos dentro lo siguiente

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ventana Shadowbox al cargar página con jQuery</title>
<link href="shadowbox.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jshadowbox.js"></script>
<script type="text/javascript"> Shadowbox.init({ language: "es", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
Shadowbox.open({
content: '<div><iframe src="http://omaredomex.org" width=492 height=367 frameborder="0" scrolling=yes marginwidth=2 marginheight=4 align=left></iframe></div>',
player: "html",
title: "www.omaredomex.org",
width: 492,
height: 367
});
}, 50);
});
</script>
<style type="text/css">

.html, body {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
}

.ejemplo {
float:left;
width:100%;
padding:0px;
margin:0px;
}

.ejemplo img {
float:left;
padding:2px;
border:1px solid #999;
margin-right:10px;
margin-bottom:10px;
}

</style>
</head>
<body>
<center><img src="http://www.trucodigo.org/themes/KM-Tronos/images/Logo.png"></center>
<div class="ejemplo">
Ventana Shadowbox al cargar página con jQuery
<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba<br /><br />
Contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba, contenido de prueba
</div>
</body>
</html>


ahora crearemos dos archivos mas uno llamado shadowbox.css y el otro shadowbox.js

dentro de shadowbox.css colocaremos

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(../images/close.png);}
/*#sb-nav-next{background-image:url(next.png);}
#sb-nav-previous{background-image:url(previous.png);}
#sb-nav-play{background-image:url(play.png);}
#sb-nav-pause{background-image:url(pause.png);}*/
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}


y ahora en shadowbox.js lo descargaremos en el siguiente link

http://codepen.io/anon/pen/LpMLMO?editors=001

ahora tendremos que subir los 3 archivos a la raiz de nuestra web y la visualizaremos www.misitio.com/index.html

Bueno eso seria todo espero les haya gustado este pequeño truco y me despido como siempre dejandoles un


DEMO
Tags
Opciones
Estadísticas
Creado 13.11.2015 a las 01:48 hs
Categoría JavaScript
  • 0
    Medallas
  • 0
    Favoritos
  • 1723
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes