1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Tutorial Ventana modal simple

Tema en 'Tutoriales de HTML y CSS' comenzado por fede5426, 31 de Agosto de 2015.

  1. fede5426

    fede5426
    Moderador
    Miembro del Equipo

    Se incorporó:
    5 de Mayo de 2015
    Mensajes:
    237
    Me gusta recibidos:
    171
    Puntos de trofeos:
    43
    Género:
    Hombre
    Buenas, hoy traigo otro tuto, esta vez para crear con poco código una ventana modal.. ya sea para que aparezca al cargar el sitio o clickeando algún botón o enlace. He visto esta pregunta en muchos foros y repetida varias veces, así que espero sea de utilidad.

    Empezamos con el HTML

    HTML:
    <div class="modal">
        <div class="ventana">
            <!-- contenido -->
            <span class="cerrar">x</span>
        </div>
    </div>
    El div con clase "modal" es el que va a oscurecer el sitio.

    El que tiene la clase "ventana", va a ser la ventana propiamente dicha, donde vamos a poner el contenido (lo que sea)..

    El span es el botón que vamos a usar para quitar el modal, usé una X para simular el botón que tienen algunas galerías de fotos, en el resultado final se ve lo que quiero decir.

    Pasamos al CSS:

    Código (CSS):

    .modal{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:rgba(0,0,0,.7);
        display:none;
    }

    .ventana{
        width:400px;
        position:absolute;
        top:15%;
        left:50%;
        margin-left:-200px;
    }

    .ventana span{
        color:#fff;
        background-color:#000;
        padding:.2em .5em .3em .5em;
        font-family:Arial;
        font-weight:bold;
        border:2px solid #fff;
        border-radius:50%;
        position:absolute;
        top:-15px;
        right:-20px;
        cursor:pointer;
    }
    La clase .modal, como dije antes, es la que oscurece el sitio.. por lo que le colocamos posición fija y un tamaño de 100% en ancho y alto para que ocupe toda la pantalla. Display: none lo usamos para que esté oculto, con jquery lo vamos a hacer aparecer. Y el color, en rgba para que sea semitransparente, puede ser el color que quieran, yo use el negro con opacidad de 0.7

    A la clase .ventana le asignamos posición absoluta y un ancho fijo (en este caso de 400px). Para poder centrarla usamos un left de 50% y un margen izquierdo con el valor de la mitad del ancho de la ventana y en negativo. En este caso, -200px. (por eso la necesidad del ancho fijo). El top de 15% es para separarlo del borde superior de la pantalla.

    Por último los estilos aplicados al span son para darle forma al botón y posicionarlo en la esquina superior derecha. Queda en cada uno definir la forma, color y posición que quiera, no es lo más importante.

    Ahora toca darle funcionalidad al modal.

    Código (Javascript):

    $(document).ready(function(){
     
        $(".modal").fadeIn();
     
        $(".cerrar").click(function(){
         
            $(".modal").fadeOut(300);
         
        });

    });
     
    Con éste código el modal aparece al cargar el sitio, y al clickear el botón con clase "cerrar", el modal se desvanece.

    El resultado sería este: Demo Final

    La imágen de fondo simula el sitio por detrás del modal.

    Hay otras opciones, por ejemplo queremos que el modal aparezca solo cuando clickeamos un botón.. en ese caso deberíamos agregar ese botón al HTML y cambiar un poco el script.

    Agregamos el botón al HTML:

    Código (HTML5):
    <button class="abrir">Abrir modal</button>
    Puede ser un "button", un enlace, un span.. lo que quieran.

    Los cambios del script:

    Código (Javascript):

    $(document).ready(function(){
     
       $(".abrir").click(function(){
         
            $(".modal").fadeIn();
         
        });
       
     
        $(".cerrar").click(function(){
         
            $(".modal").fadeOut(300);
         
        });

    });
     
    Es tan simple como cambiar la parte que hace que el modal aparezca al cargar el sitio, por el código que hace que al clickear el elemento con clase "abrir", aparezca el modal.

    Otra variante es eliminar el scroll del sitio cuando el modal está visible. En los ejemplos anteriores no se puede ver porque el sitio es solo una imagen de fondo en el body, pero si el sitio ocupa más del alto de la ventana, al hacer scroll con el modal abierto el sitio se mueve por detrás.

    Para evitar esto, creamos una clase que vamos a llamar "overflow" y vamos a aplicarle "overflow:hidden" para que no muestre el scroll. Luego con jquery, al momento de hacer aparecer el modal, aplicamos esta clase al body, y al cerrar la ventana quitamos la clase.

    Código (CSS):

    .overflow{
       overflow:hidden;
    }
     
    Código (Javascript):

    $(document).ready(function(){
     
       $(".abrir").click(function(){
         
            $(".modal").fadeIn();
            $("body").addClass("overflow");
         
        });
       
     
        $(".cerrar").click(function(){
         
            $(".modal").fadeOut(300);
            $("body").removeClass("overflow");      

        });

    });
     
    Con esto logramos que al hacerse visible el modal, el sitio quede fijo si usamos el scroll del ratón.

    Y eso sería todo. Espero les sirva, cualquier duda la dejan en este mismo post y trato de responderla lo antes posible.

    Saludos :D
     
    A Starking Elyos, AngelKrak y Maddenamy les gusta esto.
  2. JPBasoalto

    JPBasoalto Nuevo Miembro

    Se incorporó:
    7 de Enero de 2015
    Mensajes:
    4
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Ocupación:
    Diseñador web Front-end
    Localización:
    Santiago - Chile
    Hola Fede:

    una consulta, esto es sin bootstrap, verdad?

    saludos!
     
  3. fede5426

    fede5426
    Moderador
    Miembro del Equipo

    Se incorporó:
    5 de Mayo de 2015
    Mensajes:
    237
    Me gusta recibidos:
    171
    Puntos de trofeos:
    43
    Género:
    Hombre
    Asi es, sin bootstrap.. tal como se ve en el post, el unico framework utilizado es Jquery.

    Saludos!
     
    A JPBasoalto le gusta esto.
  4. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Fede con esto se podría hacer un plugin para wordpress de lightbox?? porque es lo que estoy buscando simple, sencillo, que solo se aplique a las galerias y que entienda el codigo para que sepa modificarlo jajajaj

    PD: Solo le veo un fallo no es responsive :)
     
  5. fede5426

    fede5426
    Moderador
    Miembro del Equipo

    Se incorporó:
    5 de Mayo de 2015
    Mensajes:
    237
    Me gusta recibidos:
    171
    Puntos de trofeos:
    43
    Género:
    Hombre
    Para ser sincero, no tengo ni la mas remota idea de como hacer plugins para wordpress :D jaja

    No es un fallo, no era la finalidad que sea responsive :)

    Saludos
     
  6. RodrigoT

    RodrigoT
    Administrador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    759
    Me gusta recibidos:
    195
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiate
    Localización:
    España
    Página web:
    Ya jajajaj lo decía porque para usarlo de plugin necesitaba que fuese responsive jjajajaj para mi web :p
     
  7. geriito

    geriito Miembro

    Se incorporó:
    9 de Enero de 2015
    Mensajes:
    132
    Me gusta recibidos:
    4
    Puntos de trofeos:
    18
    Género:
    Hombre
    Buenas fede me encanta tu ventana modal. Pero como podriasmos hacerla responsive?
     
  8. davidg9404

    davidg9404 Nuevo Miembro

    Se incorporó:
    5 de Marzo de 2016
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Estaría interesante hacerla sin jQuery! ;)
     
  9. lunasdekaliope

    lunasdekaliope Nuevo Miembro

    Se incorporó:
    9 de Marzo de 2016
    Mensajes:
    2
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola a todos/as, también se puede hacer con :checked y radiobutton...a ver que os parece...resultado
     
  10. programmer

    programmer Nuevo Miembro

    Se incorporó:
    17 de Agosto de 2016
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    una pregunta a todos,, es posible mostrar los resultados de una busqueda en google en un modal?? soy nuevo espero me puedan ayudar...
     
  11. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.408
    Me gusta recibidos:
    644
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    si se puede mediante un iframe...
     
  12. programmer

    programmer Nuevo Miembro

    Se incorporó:
    17 de Agosto de 2016
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Me podrias proporcionar un ejemplo,,,, te lo agradeceria mucho... gracias
     
  13. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.408
    Me gusta recibidos:
    644
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    No amigo ya no se puede, ya vi que esta Deprecated el Iframe Search de google :/
    Respuesta a tu Pregunta: No se Puede ya Actualmente :(
     
  14. programmer

    programmer Nuevo Miembro

    Se incorporó:
    17 de Agosto de 2016
    Mensajes:
    3
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    De todos modos muchas gracias...
     
  15. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.408
    Me gusta recibidos:
    644
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    De Nada jejeje xD
     
  16. papuchyn

    papuchyn Nuevo Miembro

    Se incorporó:
    5 de Abril de 2017
    Mensajes:
    1
    Me gusta recibidos:
    0
    Puntos de trofeos:
    1
    Género:
    Hombre
    Hola Fede, SOY NUEVO AQUI he buscado por todas partes, Youtube Google Foros etc etc y no encuentro nunca como hacer un modal a partir de una imagen...
    Es decir, tengo una imagen le doy click para que se amplie y al ampliarse se muestra en una ventana modal. No no quiero hacer una galeria de eso hay miles solameente quiero aplicarlo a cada imagen de cada html que hago.

    Creo que solameente habria que agregarle algo a tu codigo pero no se como....

    Saludos y gracias adelantadas!!
     
  17. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    654
    Me gusta recibidos:
    494
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Hola, Aquí tengo un simple ejemplo realizado en Codepen... has click aquí http://codepen.io/Dawud89/pen/dvpbqa

    Y como quieres mostrar las imágenes que quieres visualizar en tu página... para ello una manera supongamos que tienes una imagen en principio y 2 imagenes mas abajos, una manera es que le agregues un evento onclick a todas las imágenes que quieres ver y recuperar dicho atributo src, esto lo hace mediante el uso de JS , en el link que te menciono anteriormente selecciono la imagen que quiero visualizar y lo muestro en una ventana modal... ya que en el JS recupero el src "ruta de la imagen" y agrego esa ruta de la imagen en la vista previa del elemento modal... Analiza el JS
     
    A AngelKrak le gusta esto.
  18. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.408
    Me gusta recibidos:
    644
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    hace mucho hice un aporte de eso, por eso hay que usar el buscador ;)
    [​IMG]
    http://www.heroesdelaweb.com/threads/modalbox-jquery.1757/
     

Comparte esta página