f Crear ventana modal responsive CSS3 - El Maquetador Web, Maquetación Freelance, Curso HTML HTML5 CSS Tutorial Diseño Responsive Adaptable

¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

1.3.15

Crear ventana modal responsive CSS3

Seguimos proporcionando recursos para maquetadores web, esta vez una Ventana Modal o Popup Responsive hecho desde cero.

Si se quiere animar la ventana modal, podéis hacerlo fácilmente con la librería Animate.css, la cual explicamos con anterioridad en esta web.

Como vemos en el siguiente ejemplo, para animar el modal añadimos las clases .animated y la clase del tipo de movimiento, que en nuestro caso es .bounceIn. Podemos consultar una lista completa de efectos en la web oficial de la librería.



El ejemplo en codepen:

See the Pen Qwxzey by Pedro Marín (@pedromarin) on CodePen.

4 comentarios:

  1. Buenas noches Pedro.
    Algo así había estado buscando... muchas gracias por compartir su conocimiento. Si no es mucho pedir ojalá me pueda responder la siguiente pregunta:
    Cómo controlo la información que sale en la ventana modal por medio de una variable? como hago para pasarle una variable a la ventana modal y que se muestre la info según esa variable???
    Agradezco su ayuda y de nuevo gracias.

    ResponderEliminar
  2. Hola Carlos, disculpa la demora, he estado ocupado.
    Te respondo a tu consulta, para personalizar el texto con una variable, he modificado ligeramente la funcion "mostrar", que quedaría así:

    function mostrar(texto) {
    $(".cajaexterna").show();
    $(".cajacentrada p").text(texto);
    darEfecto("bounceIn");
    }



    Y para llamar a la función "mostrar" cuando hacemos click, ahora sería así:

    $("a.mostrarmodal").click(function() {
    var texto = "Aquí escribes el texto que quieras";
    mostrar(texto)
    });

    Espero haberte ayudado, si necesitas mas ayuda o consejos avísame, un saludo, ánimo que con tiempo se aprende todo, y gracias por la visita ;)

    ResponderEliminar
  3. Buenos dias carlos me sirvio a la perfeccion, pero quisiera saber como hago que se muestre en el centro de la pagina en vez de al inicio(top)

    ResponderEliminar
  4. Hola Orlando.

    Para centrar el modal verticalmente en tu página puedes utilizar una de las técnicas que describimos en http://www.elmaquetadorweb.com/2016/08/como-centrar-div-texto-imagen-y-tabla.html

    De todas maneras te hemos dejado un CodePen con el modal centrado en:

    https://codepen.io/pedromarin/pen/jZOxxr

    Esperamos que te sirva, un saludo.

    ResponderEliminar