Ventana modal sólo con CSS

30/ene/2008 46

A raíz de mi proyecto musical más reciente lanzado, incluyendo el sitio web donde me divertí mucho utilizando Mootools para sus diferentes funcionalidades, iré ampliando los artículos relacionados con este framework de JS explicando los puntos más importantes de su desarrollo. Pero para comenzar, mostraré un modo de crear ventanas modales (lightbox, thickbox, greybox, modalbox… son todas ventanas modales) sólo con CSS. Mientras puedo, ahorro en plugins para no recargar los sitios, y en el caso de las ventanas emergentes no-obstructivas utilicé un elegante método donde a través de simple CSS se abren ventanas con mensajes varios. Para gatillarla, utilicé, claro, Mootools. Pero donde tomé prestado la idea, utilizaban Javascript puro para ello. Mostraré ambos métodos, a gusto y necesidad del usuario cuál decidir ocupar.

Comenzamos con el marcado HTML. Primero, un <div class="overlay"></div> el que será el fondo semi-transparente que cubrirá la página entera, y albergará la ventana del mensaje. Luego, un <div class="modal"> que contendrá el mensaje o contenido de nuestra ventana modal. Estas 2 classes, .overlay y .modal, estarán escondidas desde un principio (display: none;) y serán gatilladas desde algún link (display: block;). Después de ellas, el contenido del resto del sitio web.

<div id="fade" class="overlay"></div>>
  <div id="light" class="modal">
     <p>Lorem ipsum dolor sit.....</p>
  </div>
<p>Texto del sitio web. Con un <a href="">link</a> abriremos la ventana.</p>

Nada de eso nos sirve sin un correcto uso de CSS. Para la base semi-transparente le damos opacidad a través del método cross-browser:

.overlay{
     display: none;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000;
     z-index:1001;
     opacity:.75;
     -moz-opacity: 0.75;
     filter: alpha(opacity=75);
}

Y la ventana modal del contenido mismo:

.modal {
     display: none;
     position: absolute;
     top: 25%;
     left: 25%;
     width: 50%;
     height: 50%;
     padding: 16px;
     background: #fff;
     color: #333;
     z-index:1002;
     overflow: auto;
}

Ver ejemplo sólo con CSS

Ahora, lo echamos a andar. A ambos div‘s debemos darle id‘s únicos, los que nos ayudarán a identificar los elementos que serán mostrados vía Javascript. La orden para ejecutarlos es en Javascript puro:

document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'

Y a través de Mootools:

$('light').setStyle('display', 'block');
$('fade').setStyle('display', 'block');

Lo que dice ahí, en castellano universal es: toma los elementos con el id light y fade, y agrégales estilo display: block; a cada uno. O sea, los hará aparecer desde display: none (oculto) a display: block; (visible).

Ver ejemplo funcionando con JS

Links

Comentarios

  1. Victor San Martin [#]

    Buenos tips, un modal bastante basico pero es la base para lograr buenas cosas.

    Felicitaciones por el sitio (2monos.net) me recuerda bastante a dontclick.it.

    Saludos

  2. CSSLab Admin [#]

    Gracias Victor, al contrario de dontclick.it aqui es todo con HTML CSS JS, gran logro creo yo ya q desplaza bastante bien a Flash. Salu2.

  3. iván [#]

    excelnte artículo!!! de 10!! te felicito, realmente muy creativo. Al momento de leerlo se me ocurrió que jugando con los z-index se podría mostrar entre medio del fondo gris y la ventana modal del mensaje, un div que ocupe toda la pantalla y trabaje como boton para cerrar todo, tipo lightbox, thickbox, greybox, modalbox…
    Bueno, voy a ver si pruebo y comento. saludos

  4. Gonzalo [#]

    Hay un problema… en IE no me esta funcionando esto :S

    estoy jugando con javascript para hacer que se mueva el fondo de fade, hay un problema con la altura en IE (6).

    De todas maneras esta excelente =D

  5. Guillermo [#]

    Saludo muy interesante los comentarios que he leido he apredindo mucho de cada uno. me sirvieron de nota para seguir mi camino que es infinito. porque cada dia son mas extensos la programacion y no es extatica sino dinamica

  6. CSSLab » Review 2: Shadowbox [#]

    […] Ventanas modales actualmente hay por montones, cada una ofrece mejores prestaciones y se comportan relativamente bien dentro del entorno de desarrollo al cual fueron creadas. Lightbox fue uno de los primeros, Thickbox uno de los más completos, Greybox, Lightwindow… enfin. Hace poco descubrí el que creo es el que va más allá de todos, y que merece una especial atención: Shadowbox. Shadowbox es una ventana modal escrita enteramente en Javascript. Puede desplegar una amplia gama de archivos gráficos (imágenes, películas, etc.). Es crossbrowser, multiplataforma, de código limpio, relativamente bien documentado (aunque es nuevo). […]

  7. CSSLab - Nuestro verdadero cliente [#]

    […] de esa web. Ponerme en su lugar y darme cuenta si realmente vale la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 columnas, etc. […]

  8. Johnny [#]

    excelente el aporte, pero tengo una consulta, la funcion me cumple perfectamente de cubrir el div overlay en toda la pagina y el div modal en el centro pero al hacer click fuera del div modal esta desaparece, como puedo solucionar esto , gracias de antemano

  9. Jorge Epuñan [#]

    Johnny: Si lees el JS veras q el cerrar esta tanto para el btn como para el overlay; basta con q se lo quites.

    $(’light’).setStyle(’display’, ‘block’);
    //$(’fade’).setStyle(’display’, ‘block’);

    saludos.

  10. christian [#]

    esta mal por que el css no tiene como cerrarce

  11. CSSLab - Las 10 leyes de Jorge para el diseño y desarrollo web [#]

    […] Si siguiéramos esas reglas siempre, nunca habrían innovaciones tales como AJAX, ventanas modales, validaciones de formularios por blur entre otros. […]

  12. Pancho [#]

    Yo creo que me he vuelto adicto a facebox. Best plugin ever

  13. Blog de Cristiam Herrera Daza » Blog Archive » Nuestro verdadero cliente [#]

    […] a través de esa web. Ponerme en su lugar y darme cuenta si realmente vale la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 columnas, etc. Todo eso influye en […]

  14. jorge perez salinas [#]

    Excelente: sensillo y manejable, para poderlo utilizar con jquery.
    Gracias

  15. Raul [#]

    Buenas amigo me gusta muchisimo tu ejemplo, solo tengo un pequeño problema el cual los SWF se muestran por encima de la ventana modal, sabes como podria solucionarse?

  16. Jorge Epuñan [#]

    Raul: ese tema ya lo aborde en un articulo muy popular; espero te sirva.

    Exito.

  17. Raul [#]

    Estimado Jorge, si yo habia probado de esa forma y seguia sin funcionarme asi que vi detalladamente como incrustaste el SWF y me di cuenta que aparte de agregar el parametro

    tambien el tiene que tener la propiedad wmode=”opaque” y asi me funciono perfecto, muchas gracias jorge por tu gran colaboracion.

  18. Raul [#]

    el <embed wmode=”opaque” y es que al agregarlo en DW no la coloca

  19. Villimon [#]

    Hola… muy buen codigo para hacer las ventanas !!! pero en IE no funciona… donde puedo conseguir el codigo que falta para que funcione bien en internet explorer ??? gracias !!!

  20. jose [#]

    Hola…no tengo mucho conocimiento de codigo , podrias especificarme como quedaria el para cerrar la ventana. Muchas gracias

  21. Sandra [#]

    Esto funciona a la perfección si lo que quiero mostrar es un texto. Lo que necesito es que al pinchar se abra un .pdf . En este caso me podrías ayudar en como quedaría el código? Gracias.

  22. Jorge Epuñan [#]

    Sandra: sobre los PDF’s, el problema es q se resuelven dependiendo del browser: si el usuario no tiene algun plugin de acrobat instalado, automaticamente se descargara; si lo tiene, se abrira en la misma ventana. Es algo q no puedes predecir lamentablemente, a menos q uses Flash Paper (q nunca despego, por cierto).

    Saludos.

  23. Jorge [#]

    Hola. Quiero implementar una ventana modal, pero que se abra automáticamente al cargar el index de una web.
    Vi que en http://www.2monos.net/ implementaste eso ¿Cómo lo hago?

  24. Jorge Epuñan [#]

    Jorge: basta con que lo actives, mediante Javascript, al momento en que el sitio se cargue. Esto se hace ingresando el comando descrito mas arriba en:

    <body onload=”document.getElementById(‘light’).style.display=’block'; document.getElementById(‘fade’).style.display=’block'”>

    Saludos

  25. Prof. Música [#]

    Recien empieso en esto, y realmente no comprendo mucho sobre el lenguaje html, pero entre noches de desvelos lo vamos logrando, mi blog esta dedicado a una fundacion sin fines de lucro, por lo que debo de repararmelas para diceñar o hacer cualquier cosa, que la fundacion amerite. Felicidades de nuevo por la pagina, y porntamente empleare esta ventana modal, solo una cosa, en el primer ejemplo que es de puro css no me da opciones para cerrar la ventana modal, ¿por que?

  26. Prof. Música [#]

    No sé is tenga que ver, pero se trata de una plantilla de blogger, ¿esta funcion se podria aplicar? y de ser asi ¿donde se pegan los codigos? se que el css puedo colocarlo entre las etiquetas style antes del cierre del /head y el html de pues del cierra del /head en el inicio del body o antes del /body pero el enlace cual es como llamo la funcio
    Texto del sitio web. Con un link abriremos la ventana.
    cual es la url?? jeje disculpame de verdad es que comienzo en esto y debo aprenderlo pronto, gracias.

  27. Paco [#]

    Hola! Muy bueno el aporte…. sólo una pregunta:
    ¿Cómo puedo hacer para que la ventana modal se abra JUSTO en el centro de la página, sea cual sea el tamaño de la pantalla? No quiero jugar con porcentajes, sino decirle que se abra justo en el centro ,tanto vertical como horizontalmente.
    Muchas gracias de antemano, máquinas!
    Fran.

  28. César [#]

    Estan intersantes tus estilos, pero tienes el problema que no corre en internet explorer, y por desgracia es el navegador mas utilizado en el mundo

  29. oscar [#]

    Muy bueno. Gracias por el aporte =)

  30. Intruso [#]

    Para centrarlo dale en el css lo siguiente:
    position:absolute;
    left:50%; top:50%;
    width:350px; height:550px;
    margin-left:-175px; margin-top:-275px;
    Listo. Si no usas Flash en tu web también dale a ambos:
    position:fixed;
    para que no se mueva de la pantalla.

  31. Getze [#]

    soy nueva en esto de los overlays y no domino al 100 CSS, tengo una duda los códigos van entre y donde sea? o entre y Espero su respuesta GRacias.

  32. Getze [#]

    Hola soy yo nuevamente, ya logre hacerlo funcionar pero ahora quiero saber si puedo hacer que se abran varias ventanas en unsa sola web pero con contenidos diferentes y como hacerlo. GRacias

  33. Ezeq [#]

    Esta bueno pero no es accesible… si en el navegador tenemos deshabilitado js esto nunca se podria ver…

  34. Steven [#]

    Saludos. Muy bien el ejemplo, y también lo estuve viendo desde el enlace en ingles. Yo lo estoy trabajando con MySql/PHP y tengo un problema para mostrar la correspindiente foto. Mi codigo muestra 5 fotos por cada fila. Pero al usar el ejemplo solo me muestra al hacer clic la primera imagen.

    Aquí mi código a ver si me puedes dar una mano. Saludos.

    <?php
    $resultados=mysql_query("SELECT a.fecha_creacion as fecha,a.ruta_foto as ruta_foto,u.iduser as usuario, af.idalbum as album, af.descripcion as descrip
    FROM fotos a
    INNER JOIN usuarios u on
    a.iduser=u.iduser
    INNER JOIN album_fotos af on
    a.idalbum=af.idalbum
    WHERE a.idalbum=".$id.";");

    $limite=0;

    while($datos=mysql_fetch_array($resultados))

    {
    $fotourl=$datos['ruta_foto'];
    $ruta="imagenes/eventos/";
    $ruta=$ruta.$fotourl;
    if ($limite === 0)
    {
    echo '';
    }

    if ($limite
    <img src="” width=”160″ height=”150″ />

    <img src="” />Close
    4)
    {
    echo ”; // resetamos
    $limite=0;
    }
    }

    ?>

  35. » Ventana modal sólo con CSS | CSSLab » Web Design [#]

    […] » Ventana modal sólo con CSS | CSSLab […]

  36. Pointer-Events en CSS3 → CSSLab [#]

    […] normal, es como si fuera un overlay de una ventana modal común y corriente, la que tapa todo lo que esté detrás y no deja que interactúes con nada […]

  37. Mon [#]

    Buen aporte.
    Hay un pequeño error… en la clase overlay el position debe ser fixed. Si no cuando haces un resize del navegador permite acceder al contenido que hay debajo.

  38. OSCAR GALVIS [#]

    Muy bueno, lo estoy tratando de usar pero tengo el siguiente problema:

    http://www.forosdelweb.com/f53/como-posicionar-div-centrado-como-ventan-modal-1029230/

    Como podria solucionarlo ??

  39. Carlos Contreras [#]

    Hola Amigo, mire utilice su modal para implementarlo en mi pagina pero no me funciona bien, osea yo lo abro desde mi computadora y esta perfecto pero cuando lo subo a mi servidor en la nube no funciona.

    Deseo un resultado mas o menos parecido al que se encuentra en la pagina ninfaz.com

    Agradezco la ayuda que a bien tenga brindarme. Saludos.

  40. carlos contreras [#]

    Hola buenas noches, tengo un problema y quiero pedirles su ayuda por favor. La pregunta es como disparar el siguiente evento una sola vez

    no quiero que cuando los usuarios naveguen por otra sección de mi web y se dirijan nuevamente a la pagina de inicio se cargue la ventana modal otra vez.

    Saludos desde Venezuela.

  41. carlos contreras [#]

    body onload=”document.getElementById(‘light’).style.display=’block’; document.getElementById(‘fade’).style.display=’block’”

    ese es el evento, publicado por Jorge Epuñan
    08 / Mayo / 2010

  42. Alfredopy [#]

    Esta muy bueno el aporte..

    Una consulta, como podría utilizar el mismo código en varias partes de mi sitio, hacer que sea múltiple, no para un solo id.

  43. Ruben Isla [#]

    Buenas compañeros; Tengo un pequeño proyecto y quisiera apoyarme en ustedes con un un problema que me esta ocurriendo.

    En mi pagina “Index.php” , tengo cuadro con autoscroll en el cual muestro una serie de noticias alimentadas con una DB la cual la diseñe así:

    t_noticias: id_noticia, titulo, fecha, pequeña_reseña, notic_completa.

    Cada noticia debe mostrar a simple vista : Titulo, Fecha , Pequeña reseña, “Leer mas”.

    Al pulsar “Leer mas” se debería de Mostrar toda la noticia completa

    Mi problema es que cuando pulso leer mas en el registro numero 15 ( por ejemplo), se activa la modal pero me muestra el campo notic_completa del registro n°1; si intento que me muestre la numero 100, me sigue mostrando la n°1.

    Como debo proceder?, Espero poder contar con su ayuda

  44. jorge valera [#]

    Quedo muy bien :) pero en mi opinion en ves de “position:absolute” deberia ser “position:fixed” para que quede flotante si se tiene que bajar el scroll, por que con posicion absoluta cuando se baja el scroll queda arriba fondo negro y abajo todo normal.

Deja tu Comentario

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

CSSLab