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:
Entradas
Buenas noches Pedro.
ResponderEliminarAlgo 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.
Hola Carlos, disculpa la demora, he estado ocupado.
ResponderEliminarTe 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 ;)
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)
ResponderEliminarHola Orlando.
ResponderEliminarPara 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.