{"id":2973,"date":"2012-06-10T10:10:21","date_gmt":"2012-06-10T10:10:21","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2973"},"modified":"2019-08-16T11:35:58","modified_gmt":"2019-08-16T11:35:58","slug":"mostrar-ventana-modal-al-cargar-pagina-con-shadowbox","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/mostrar-ventana-modal-al-cargar-pagina-con-shadowbox\/","title":{"rendered":"Mostrar ventana modal al cargar p\u00e1gina con Shadowbox"},"content":{"rendered":"

En este art\u00edculo vas a descubrir como mostrar una ventana modal al cargar la p\u00e1gina utilizando el plugin Shadowbox<\/strong> y la funci\u00f3n setTimeout() de JavaScript<\/strong>.<\/p>\n

Shadowbox<\/strong> es un clon de Lightbox<\/strong> pero, a diferencia de \u00e9ste no s\u00f3lo sirve para visualizar im\u00e1genes en ventanas modales, sino tambi\u00e9n p\u00e1ginas web, archivos en flash, galer\u00edas, mapas, y v\u00eddeos en varios formatos de distintos servicios.<\/p>\n

Mostrar una ventana modal al cargar una p\u00e1gina puede ser especialmente interesante utilizarlo para mostrar una oferta importante que deseas que aparezca al entrar en una tienda virtual,\u00a0 mostrar un formulario para suscribirse a la newsletter de un blog o mostrar cualquier informaci\u00f3n que el usuario debe saber si o si al navegar por el sitio web.<\/p>\n

En el ejemplo que voy a ilustrar estoy mostrando una ventana modal con Shadowbox al entrar en la p\u00e1gina. Despu\u00e9s de medio segundo se ejecuta la apertura de una ventana modal utilizando el plugin Shadowbox<\/strong>. El aspecto es similar a la siguiente imagen:<\/p>\n

\"\"<\/a>En la cabecera de la p\u00e1gina o dentro de la etiqueta <head> agrega los estilos necesarios, la librer\u00eda jQuery, la llamada al plugin y la llamada a la funci\u00f3n setTimeout de la siguiente forma:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<link rel="stylesheet" href="css\/shadowbox.css">\n<script src="https:\/\/code.jquery.com\/jquery-3.2.1.js"><\/script>\n<script src="js\/shadowbox.js"><\/script>\n<<\/span>script type=<\/span>"text\/javascript"<\/span>><\/span>\nShadowbox.init<\/span>(<\/span>{<\/span> language:<\/span> "es"<\/span>,<\/span> players:<\/span>  [<\/span>'img'<\/span>,<\/span> 'html'<\/span>,<\/span> 'iframe'<\/span>,<\/span> 'qt'<\/span>,<\/span> 'wmp'<\/span>,<\/span> 'swf'<\/span>,<\/span> 'flv'<\/span>]<\/span> }<\/span>)<\/span>;<\/span>\n \nsetTimeout(<\/span>function<\/span>(<\/span>)<\/span> {<\/span>\n    Shadowbox.open<\/span>(<\/span>{<\/span>\n        content:<\/span> '<div class="example"><img src="images\/oferta.jpg"><\/div>'<\/span>,<\/span>\n        player:<\/span> "html"<\/span>,<\/span>\n        title:<\/span> "Oferta"<\/span>,<\/span>\n        width:<\/span> 492,<\/span>\n        height:<\/span> 370\n    }<\/span>)<\/span>;<\/span>\n}<\/span>,<\/span> 500)<\/span>;<\/span>\n<\/<\/span>script><\/span><\/pre><\/div><\/div>\n
Este c\u00f3digo tambi\u00e9n puedes ser incluido antes de la etiquta de cierre <\/body>.<\/p>\n
Los archivos relacionados con el plugin Shadowbox<\/strong> los puedes encontrar en la p\u00e1gina oficial de Shadowbox<\/a> o tambi\u00e9n puedes descargarlo del c\u00f3digo de ejemplo.<\/p>\n
El c\u00f3digo anterior lo que hace es inicializar el plugin Shadowbox con algunos par\u00e1metros que nos interesan para la demostraci\u00f3n. Ver todas las opciones del plugin Shadowbox<\/a>.<\/p>\n
Y, luego, utilizando la funci\u00f3n setTimeout() de JavaScript<\/strong>, abro la ventana Shadowbox<\/strong> despu\u00e9s de medio segundo.<\/p>\n
El plugin Shadowbox<\/strong> tiene muchas opciones. En el ejemplo en funcionamiento estoy utilizando 5 opciones:<\/p>\n