› › ModalBox, una ventana modal propia

Desde hace tiempo he estado usando una ventana modal en el blog, prettyPhoto, que ahora tendréis que ver en acción en la página oficial, ya que ahora voy a usar una propia.

¿El motivo para cambiarla? Son 25kb de CSS (más todas las imágenes añadidas), más otros 25 de javascript(comprimido). Ahora, he conseguido reducirlo a sólo 8kb (7 de javascript y 1 de CSS con una imagen en base64 incluída).

Si es cierto que no soporta tantas funcionalidades como lightWindow(por ejemplo), soporta vídeos de youtube y vimeo, imágenes y iframes (otras páginas web), además de contenido “inline” (un div oculto que queremos que se muestre en la ventana modal). Por supuesto, también es posible mostrar galerías. Además, he permitido que si se tiene, se pueda usar jQuery para seleccionar elementos y si no, pues que no sea necesario. Otra característica interesante es que es “sensible” (no te muestra la imagen completa si tu pantalla es demasiado pequeña, aunque te da la opción de ampliarla después). Además, es compatible hasta con IE7 (seguramente con IE6 también, pero no he podido comprobarlo)

Cómo instalarla

Para instalarla es necesario poner esto en cualquier parte del fondo de la plantilla (como siempre, mejor encima de </body>): 

<script type='text/javascript' src='http://dl.dropbox.com/u/71679931/share/modalBox.min.js'></script>
<script type='text/javascript'>
modalBox.init('a','^modalBox')
</script>
Posteriormente hay que copiar el contenido de este archivo encima de </b:skin> o entre etiquetas <style></style> (nota: la línea con carácteres raros que encontraréis ahí es la imagen que aparece mientras carga, si la queréis cambiar podéis poner otra imagen en base64 o una url a vuestra imagen)

Cómo usarla

Para usarla sólo hace falta poner al link que se quiere abrir y poner rel="modalBox[nombreGalería]", siendo [nombreGalería] opcional.

Ejemplos

Vídeo de Youtube


<a href="http://www.youtube.com/watch?v=LEy8setXrPc" rel="modalBox">Click para verlo</a>
Click para verlo

Vídeo de vimeo


<a href="http://vimeo.com/10149605" rel="modalBox">Click para verlo</a>
Click para verlo

Iframe


<a href="http://css-tricks.com/?iframe=true&width=70%&height=90%" rel="modalBox">Click para verlo</a>
Notad que ?iframe=true es obligatorio. Width y height son parámetros opcionales que pueden especificarse en píxels o en porcentajes con respecto a la ventana. Click para verlo

Inline


<a href="#contenido-oculto-1" rel="modalBox">Click para verlo</a>
<div id='contenido-oculto-1' style="display:none">Hola! Soy el contenido oculto</div>
Click para verlo

Títulos y descripciones

He dado la opción de poner un título mediante el atributo title o data-title y una descripción (caption) mediante el atributo data-caption. El uso sería algo así:

<a href="http://www.youtube.com/watch?v=LEy8setXrPc" data-title="Este es el título" data-caption="Esta es la descripción" rel="modalBox">Click para verlo</a>
Click para verlo

Galerías

Como he mencionado antes, en los links de una galería en vez de rel="modalBox" rel="modalBox[nombreGalería]". El ejemplo lo podéis ver en la entrada de prettyPhoto (recordad cambiar rel="prettyPhoto" por rel="modalBox")

Configuración y modificaciones

La configuración de la ventana es global (la misma para todas), y es la siguiente:<(p> 


config: {
 //Queremos que al hacer click en la capa se cierre la ventana
 overlayClick:true,
 //Queremos que se muestre la navegación
 showNavi:true,
 //Ahora mismo es inútil (todavía no implementada), estará en breve. 
 showGalName: true,
 //Ancho para los elementos inline
 inlineWidth:600,
 //Orden de los elementos (1,2,3,4)
 orden:['title','content','caption','navi'],
 //Textos
 textoAnterior: "Anterior",
 textoSiguiente: "Siguiente",
 textoCerrar: "X",
 //Usar otro atributo (data-rel), etc
 atributo: "rel"
}

Por lo tanto, para editarlas, tendríamos que poner antes de modalBox.init (aunque en el mismo script) modalBox.config.nombreOpcion = valor. Por ejemplo:
modalbox.config.textoAnterior = "«"

Truco: Usarla en todas las imágenes de las entradas (con jQuery)

Gracias a que he dado opción a usar jQuery para seleccionar los links, podemos usarlo para todas las imágenes de las entradas. Para ello, sólo haría falta cambiar la línea de código que pone modalBox.init('a','^modalBox') por modalBox.init('.post-body a:has(img)').

Como siempre, si tenéis alguna duda no dudéis en comentar para aclarar vuestras dudas, o cualquier otra cosa.

93 pensamientos en “ModalBox, una ventana modal propia”

    • Imagen de Emilio Cobos Álvarez el dijo:

      Claro, puedes modificar todo el archivo CSS, desde colores hasta los links. He procurado identificar todo con una clase para evitar conflictos con el resto del CSS. Todo es ponerse a trastear.
      Además puedes editar los textos desde las opciones, si no te gustan "Anterior", "Siguiente" y "X" ;).

  2. Imagen de Juvinao el dijo:

    Emilio tengo una duda ya lo instale en mi blog pero al entrar a un post con varias imagenes no veo el enlace para avanzar ese que dice Anterior,Siguiente yo esoy usando la modalidad que es para usarlo en todas las imagenes

    • Imagen de Emilio Cobos Álvarez el dijo:

      Claro, es el css. Para poner una imagen en vez de texto, cambia todo lo que venga en #modal-navi a, #modal-navi a:visited por:

      display: inline-block;
      _display: inline;
      height: ALTURA;
      width: ANCHURA;
      /*Esto oculta el texto*/
      text-indent: -9999px;
      position: relative;/*Podrías usar absolute si quieres ponerlo con respecto a la ventana modal.*/
      z-index: 9999;

      y luego usar reglas para #modal-navi a.next,#modal-navi a.close, #modal-navi a.prev con
      background-image:url(URL DE LA IMAGEN)
      también deberías usar top y left para posicionarlo

  5. Imagen de AnonymousAnonymous el dijo:

    estoy intentando me funciona perfecto per con internet explorer 8 se queda pensando no funciona. sabes cual puede ser la solución?

  7. Imagen de luis fernandoluis fernando el dijo:

    hola emilio, cuando lo abro con ie8 se queda loading, loading, no continuan, se quedan pegados tus ejemplos, pero no muestra error en el navegador, checquea tu mismo para que lo veas

    • Imagen de Emilio Cobos Álvarez el dijo:

      No sé. He corregido ahora mismo algún errorcillo que había por ahí, no estoy seguro de si sería la causa, pero no creo, de todas maneras.

      Es igual. ¿Podrías mirar si funciona ahora? creo que mañana voy a poder mirarlo, pero no estoy seguro…

      Gracias por la ayuda.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Corrijo, hasta ahora funcionaba bien en IE7/8 pero sólo la primera vez que cargabas la imagen. El problema era que el evento onLoad en imágenes lo ejecutan todos los navegadores aunque la imagen esté en la caché (bueno, todos menos IE < 9). La solución, activarlo manualmente si han pasado más de 2 segundos (no pasaría nada si se ejecuta 2 veces, pero procuro tardar 2 segundos para que la imagen cargue).

      Gracias por todo.

  9. Imagen de AnonymousAnonymous el dijo:

    Agradeciendote este tutorial bien hecho, tengo un par de dudas con respecto al desplazamiento pues como se podria hacer para que cuando se mueva la barra scroll del mouse este no desaparezca del centro de la pagina, pues recordemos que es una ventana modal y que esta tiene el foco de atencion total y que cuando se haga click en cualquier parte de el no se cierre.

    Espero puedan ayudarme a gestionar dicha personalización.

    Gracias de antemano.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Esa era la idea al principio, pero no es viable ya que si la imagen es mayor que la pantalla, no se podría cerrar si se hace click en ampliar.

      Es posible que haya una manera, usando position:fixed si el contenido es menor, y absolute si es mayor.

      Ahora mismo no tengo tiempo, pero haré algún experimento cuando tenga algo más de tiempo.

  10. Imagen de ZETA el dijo:

    para mejor entendimeinto delo formulado anteriormenete es como se puede hacer para que el fondo de la pagina principal (contenedor) sea la que se desplaze y no la que ventana modal, por otro lado evitar que al hacer clic en cualquier parte de la pagina esta desaparezca del centro de atencion y se cierre.

    Lo estoy utilizando con el IFrame para cargar una pagina y se muestre como modal, intente ver que pasaba con el IE 8.0.6001.18702 y este se queda pensando de cargar y despues nada se congela???

    Agradeciendo posibles soluciones.

    Gracias.

    Atte.

    zetaperu

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sobre lo del IFrame, he probado con IE8 y el formulario de contacto se ve bien en esta página.
      De todas maneras probaré otra vez.

      Si no, es posible que el iframe tarde mucho en cargar (usamos el evento onload para mostrarlo, es decir, cuando está completamente cargado).

      De todas formas me gustaría que si pudieras me pasaras el link a la página.

      Para finalizar lo de no cerrarla cuando se hace click en una parte de la página es posible especificando antes de modalBox.init(…):

      modalBox.config.overlayClick = false;

    • Imagen de ZETA el dijo:

      Te agradezco tu tiempo en leer y dar parte de la solución, pues con respecto a lo del cierre en cualquier parte ya está subsanado, mi dilema solo es que el fondo de la pagina sea el unico que se mueva mas no la ventana modal, intente cambiar position:fixed pero sale muy abajo es decir en la parte inferior de la pagina…

      Te dejo el enalce para que lo puedas chequear en IE 8 on el IFrame

      http://www.nubeazul-sanagustin.edu.pe/nube.htm

      En la parte inferiro la columna de color verde en el boton Leer más al hacer click es donde se queda pensando y no se muestra.

      Cualquier sugerencia

      Atte.

      ZETAPERU

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sigo: Lo de position:fixed tendría que arreglarlo yo, ya que en el script configuro la posición con datos de la ventana para usar position:absolute;

      Una opción (aunque no compatible con IE7) sería poner en el CSS lo siguiente en los estilos de #modalBox:

      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;

      Todas las declaraciones deberían de ir seguidas de !important para sobreescribir los estilos que aplico.

  12. Imagen de AnonymousAnonymous el dijo:

    Perdón Emilio, si que funciona. El problema es que con Firefox 13.0.1 no va. ¿Podemos hacer algo para solucionarlo?, pues hoy en día Mozilla se está imponiendo mucho entre los usuarios.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Estoy comentando desde Firefox 13.0.1 sobre windows 7 de 64bits (concretamente "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:13.0) Gecko/20100101 Firefox/13.0.1")y no he notado ningún problema al usarla.

      Me podrías dar más detalles sobre la versión (Sistema operativo, userAgent…)?

      Para ver el userAgent con Firefox tienes que instalar firebug y en la consola escribir:
      navigator.userAgent

  14. Imagen de Paginas web el dijo:

    Sabía que no me funcionaría a la primera!! jajaja es que no podía ser tan perfecto!!
    Mi intención es hacer una ficha de usuario.. Algo con datos.. tipo;
    Nombre:
    Apellidos:
    Teléfono:
    etc etc:

    Y para ello estoy usando el código de inline!! PEEERO al clickar, abre el cajón pero sin nada escrito!!

    • Imagen de Emilio Cobos Álvarez el dijo:

      Ok, ya está (o debería). Fue un fallo mío. Cambié una función para que en vez de llamar al elemento, fuera un argumento (para ahorrar espacio).

      Pero a la hora de crear las diferentes partes de la modal, se me pasó cambiarlo, así que nunca se creaba. Al intentar acceder a algo que era nulo, daba un error, y se quedaba tal y como quedaba.

      Ya está actualizado y no debería de haber problemas.

  15. Imagen de AnonymousAnonymous el dijo:

    Hola, no que que estoy haciendo mal pero he intentado ya mas de 20 veces siguiendo paso por paso y no me funciona, en ningun navegador, estoy haciendo un iframe y se me abre la direccion en la misma ventana pero sin el modal, disculpen mi estupidez pero no me sale, me pueden repetir los pasos mas detallados, quizas algo me falte

  17. Imagen de Juanlu el dijo:

    Hola Emilio,
    antes me funcionaba tu plugin de ventanas modales en IE8, pero ahora de pronto no funciona, se queda cargando la imagen de loading y no se muestra la ventana. En Firefox, Safari y Opera funciona perfecto. ¿Es posible que hayas cambiado algo?

    Un saludo.

    • Imagen de Emilio Cobos Álvarez el dijo:

      No había cambiado nada. El problema persistía, pero era por culpa de la desastrosa caché de IE (anterior a 9).

      El problema es el siguiente: Cuando tú cargas una imagen descargándola todos los navegadores usan el evento 'onload'. Si la cargas desde la caché (la usas por segunda vez), todos menos IE lo usan. Yo lo usaba para conseguir calcular las proporciones de las imágenes. He tenido que poner la url de la imagen después de añadirle el evento…

      Debería de funcionar ahora.

      Con los iframes pasaba lo mismo, solo que peor, porque si añades el evento via javascript (no un atributo), IE ni se molesta. Pero en este caso me daba menos problemas quitar el evento porque el ancho del iframe ya está configurado…

      Gracias por comentar con el problema :)

    • Imagen de Emilio Cobos Álvarez el dijo:

      No tiene demasiada complicación. Se trataría de tener un formulario de contacto en HTML, y cargarlo como un iframe, es decir:

      <a href="URL_FORMULARIO?iframe=true&width=ANCHO&height=ALTO" rel="modalBox">Contacto</a>

      Cambiando URL_FORMULARIO por la url de la página, y ancho y alto por la anchura y altura que quieres que tenga la ventana modal.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Lo que pasa es que cometes un error de sintaxis al poner la configuración (por lo que no inicias la ventana modal). En este post indico que cada opción debe cambiarse una a una (de hacerlo).

      El problema es que estás usando el cachito de script que usé para enseñar la configuración.

      Borra todo lo de "config: {…}".

      Como no has alterado ninguna opción, no tienes que poner nada, pero si no tendrías que usar "modalBox.config.nombreOpción = valor;", cambiando "nombreOpción" y "valor"

    • Imagen de Emilio Cobos Álvarez el dijo:

      El problema está en que llamas al script en el <head> de la página: Deberías de poner el script justo encima de </body>, o en su caso hacer algo como:

      function init(){
      modalBox.init('a', '^modalBox')
      }
      document.addEventListener ? document.addEventListener('DOMContentLoaded', init, false): window.attachEvent('onload', init);

  20. Imagen de AnonymousAnonymous el dijo:

    Emilio

    Buenos dias

    Mi nombre es ISABEL, mi correo es isabel.ramirez.montoya@gmail.com

    Estoy dando mis primeros pinitos en esto de la programacion web, tengo nociones muy basicas de html, php y javascript, sin embargo tengo una par de dudas y quisiera saber si me puedes dar una manito sin ningun compromiso si es posible.

    Te lo pregunto por que veo que sabes mucho.

    Gracias

  22. Imagen de FlorFlor el dijo:

    He probado de varias formas y me sigue abriendo en la misma ventana. Necesito hacer un formulario, por ahora estoy probando con un video de youtube pero no me funciona.

    Lo tengo puesto así

    Modalbox.config.atributo = “data-rel”;
    modalBox.init(‘a’,'^modalBox’)

    Hay algo que estoy haciendo mal?

    • Imagen de Emilio Cobos Álvarez el dijo:

      Supongo que estarás usando rel="modalBox" en vez de data-rel="modalBox". Si no, es posible que estés cargando modalBox antes que el contenido, o que estés usando las comillas especiales que has usado en el comentario.

      Si me dejas echar un vistazo al código puedo ayudarte ;)

      • Imagen de FlorFlor el dijo:

        Muchas gracias por la respuesta. Modifiqué el data-rel=”modalBox” pero me sigue sin funcionar..
        lo tengo puesto justo antes del cerra el body

        A que te referis con comillas especiales?
        Estoy trabajando en forma local.. de que manera podria pasarte el codigo?
        Gracias nuevamente

      • Imagen de florflor el dijo:

        Logré hacer que me funcione.

        Pero en explorer me abre el modal pero sin el iframe, y no lo abre en el centro, si no arriba a la izquierda. De que forma podria solucionarlo?

        Gracias nuevamente

  23. Imagen de toñotoño el dijo:

    hola emilio no me funciona no se que hago mal?? tengo en mi proyecto un archivo main.css debo copiar el contenido del modal.css a mi main.css?? o donde lo debo de poner?? gracias

      • Imagen de toñotoño el dijo:

        Emilio ya me sale en firefox 16.0, tengo una pregunta , no me sale en internet explorer ver.9.0.8112.16421 64bit-edition hay algo o existe algo en lo que puediera estar mal para que me pudiera salir??? gracias por tu ayuda

      • Imagen de Emilio Cobos Álvarez el dijo:

        Es probable que haya un conflicto con el modo de estándares de IE, lo que hace fallar al script con la detección del navegador.

        Usa un doctype correcto al principio del código (<!DOCTYPE html>), y usa una meta para evitar ese comportamiento (<meta http-equiv='x-ua-compatible' content='IE=edge, chrome=1' />)

  25. Imagen de toñotoño el dijo:

    hola emilio disculpa la molestia nuevamente he puesto lo que me has dicho del doctype pero aun asi me aparece como si me saliera pero me sale en la parte superior izquierda un pedacito del modalbox y lo unico que puedo hacer es cerrarlo no sabes que otra cosa estaria haciendo mal???

  26. Imagen de VictorVictor el dijo:

    Estimado Emilio, tal vez sabes como hacer para que el modalbox salga en pantalla completa. Lo que pasa que tengo un iframe y desde ahí llamo al modalbox, pero se limita al tamaño del iframe padre. Quisiera que salga en toda la pantalla. Alguna sugerencia, te lo agradecería mucho.

  28. Imagen de francofranco el dijo:

    Que tal, quería preguntarte como hacer para editar el tiempo que tarda en hacer el efecto (que se agranda), quiero que sea mas rapido ya que luego de hacerlo muchas veces se vuelve denso.
    Desde ya muchas gracias y esta muy bueno el script.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sinceramente, no se cómo no se me ocurrió ponerle esa opción: queda anotada para la actualización :)

      De todas maneras, si te urge, sólo tendrías que cambiar en el script todas las ocurrencias de 600,function() por [tiempo],function() (donde tiempo es el tiempo que quieres que dure la animación en milisegundos).

  29. Imagen de Esteban el dijo:

    Estimado,

    Instalé la función con iframe href=”URL/?iframe=true&width=70%&height=90%” rel=”modal”
    Funciona excelente al hacer clic sobre el link . Mi consulta es como la puedo ejecutar al cargar la página.

  30. Imagen de achim_311achim_311 el dijo:

    Emilio me han servido de mucho los ejemplo, muy bueno.
    Pero tengo una duda en el código:

    <script type='text/javascript' src='http://dl.dropbox.com/u/71679931/share/modalBox.min.js'></script>

<script type='text/javascript'>
modalBox.init('a','^modalBox')
</script>

    En esta parte 

    <script src="http://dl.dropbox.com/u/71679931/share/modalBox.min.js"></script>

    Hay alguna forma de ponerlo local, asi como esta es necesario salir a internet para que cargue la ventana modal, y sin internet no funciona. Lo quisiera para ponerlo en una red local sin internet.

    Saludos.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sí, sería tener almacenada una copia del archivo en el servidor local, y poner el script apuntando a esa ruta. Por ejemplo, si el root del servidor está en /var/www/, copiarías una copia del script en ese directorio, y desde la página local desde donde lo quieras llamar pondrías:

      <script src="/modalBox.min.js"></script>
  36. Imagen de kennykenny el dijo:

    hola Emilio quisiera en donde se modifica para que al la ventana modal no se oculte al dar click en cualquier parte es en el overlayclick:false ? o en que lugar gracias

  37. Imagen de greggreg el dijo:

    AYUDA ESTOY GENERANDO ESTE CODIGO GENERICAMENTE CON JAVASCRIPT Y CUANDO QUIERO HACER REFERENCIA AL HREF DE LA ETIQUETA ME REDIRECCIONA Y NO ME EJECUTA LA VENTANA MODAL GRACIAS!!
    ESPERO PUEDAN AYUDARME

    
for (i = 0; i < movies.length; i++) { filas += "<tr><td>" + movies[i].mID + 			 "</td><td>" + movies[i].title + 			 "</td><td>" + movies[i].year + 			 "</td><td>" + movies[i].director + 			 "</td><td id='"+movies[i].mID+"' onclick='eliminar(this.id);'><img src='img/borrar.png' width='80px' height='30px'></td><td id='"+movies[i].mID+"'><a href='formulario1.html?iframe=true&width=350&height=400' rel='modalBox'><img src='img/modificar.jpg' width='80px' height='30px'>"			 "</a></td></tr>";            }
            
            document.getElementById("tblbody").innerHTML = filas;
            
           
        }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.