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
    Moderador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    738
    Me gusta recibidos:
    168
    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
    Moderador
    Miembro del Equipo

    Se incorporó:
    27 de Junio de 2015
    Mensajes:
    738
    Me gusta recibidos:
    168
    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 Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    940
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    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 Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    940
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    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 Miembro conocido

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    940
    Me gusta recibidos:
    358
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    De Nada jejeje xD
     

Comparte esta página