Ventana Modal o Popup con css3 animación

marzo 13, 2013 | Html5 & Css3

las ventanas modal, popup o ventana emergente se han convertido en algo necesario a la hora de crear una pagina web, es útil para mostrar información adicional con el fin de no tener que abrir una ventana o pestaña adicional.
en este articulo vamos aprender a hacer una ventana modal elegante con CSS3 y un poco de Jquery, vamos a utilizar la propiedad de CSS3 – transform: scale(valor).

Creando el Cuerpo o marcado en HTML

Nuestra ventana modal será envuelto por un elemento de superposición para distinguir su capa con la página principal. Esta superposición llamada overlay-container tendrá degradado radial de negro o gris transparente para notar nuestro efecto.

<h2>Creando una Ventana Modal (popup) con CSS3 (scale Transform).</h2>
	<input type="button" value="Acercar Ventana Modal" class="button" data-type="zoomin" />
	<input type="button" value="Alejar Ventana Modal" class="button" data-type="zoomout" />
<div class="overlay-container">
	<div class="window-container zoomin">
		<h3>Hola soy tu ventana modal "Efecto Acercar"</h3>
		Gracias al css3 y su propiedad de<strong> scale </strong>estoy aqui y soy mas sencillo de realizar<br/>
		Regresa al tutorial y sigue las instrucciones, nos vemos!<br/>
		<span class="close">Close Me</span>
	</div>
	<div class="window-container zoomout">
		<h3>Hola soy tu ventana modal "Efecto Alejar"</h3>
		Gracias al css3 y su propiedad de<strong> scale </strong>estoy aqui y soy mas sencillo de realizar<br/>
		Regresa al tutorial y sigue las instrucciones, nos vemos!<br/>
		<span class="close">Close Me</span>
	</div>
</div>

Aplicando Estilos con CSS3

.overlay-container {
 display: none;
 content: " ";
 height: 100%;
 width: 100%;
 position: absolute;
 left: 0;
 top: 0;
 background: -moz-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%, rgba(127,127,127,0.9) 100%);
 background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(127,127,127,0)), color-stop(100%,rgba(127,127,127,0.9)));
 background: -webkit-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
 background: -o-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
 background: -ms-radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
 background: radial-gradient(center, ellipse cover, rgba(127,127,127,0) 0%,rgba(127,127,127,0.9) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#e67f7f7f',GradientType=1 );
 }

 .window-container {
 display: block;
 background: #fcfcfc;
 margin: 8em auto;
 width: 500px;
 padding: 10px 20px 20px;
 text-align: left;
 z-index: 3;
 border-radius: 3px;
 box-shadow: 0px 0px 30px rgba(0,0,0,0.2);
 -webkit-transition: 0.4s ease-out;
 -moz-transition: 0.4s ease-out;
 -ms-transition: 0.4s ease-out;
 -o-transition: 0.4s ease-out;
 transition: 0.4s ease-out;
 opacity: 0;
 }

 .zoomin {
 -webkit-transform: scale(1.2);
 -moz-transform: scale(1.2);
 -ms-transform: scale(1.2);
 transform: scale(1.2);
 }

 .close {
 margin: 1em auto;
 display: block;
 width: 52px;
 background: #fafafa;
 background: -moz-linear-gradient(top, #fafafa 0%, #f4f4f4 40%, #e5e5e5 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(40%,#f4f4f4), color-stop(100%,#e5e5e5));
 background: -webkit-linear-gradient(top, #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
 background: -o-linear-gradient(top, #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
 background: -ms-linear-gradient(top, #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
 background: linear-gradient(to bottom, #fafafa 0%,#f4f4f4 40%,#e5e5e5 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#e5e5e5',GradientType=0 );
 border: 1px solid #aaa;
 padding: 5px 14px;
 color: #444;
 font-family: Helvetica, sans-serif;
 font-size: 12px;
 border-radius: 3px;
 box-shadow: 0 1px 3px #ddd;
 -webkit-transition: 0.2s linear;
 -moz-transition: 0.2s linear;
 -ms-transition: 0.2s linear;
 -o-transition: 0.2s linear;
 transition: 0.2s linear;
 cursor: pointer;
 }

 .close:hover {
 background: #fefefe;
 background: -moz-linear-gradient(top, #fefefe 0%, #f8f8f8 40%, #e9e9e9 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(40%,#f8f8f8), color-stop(100%,#e9e9e9));
 background: -webkit-linear-gradient(top, #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
 background: -o-linear-gradient(top, #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
 background: -ms-linear-gradient(top, #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
 background: linear-gradient(to bottom, #fefefe 0%,#f8f8f8 40%,#e9e9e9 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e9e9e9',GradientType=0 );
 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 border: 1px solid #aaa;
 }

 .close:active {
 background: #f4f4f4;
 background: -moz-linear-gradient(top, #f4f4f4 0%, #efefef 40%, #dcdcdc 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(40%,#efefef), color-stop(100%,#dcdcdc));
 background: -webkit-linear-gradient(top, #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
 background: -o-linear-gradient(top, #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
 background: -ms-linear-gradient(top, #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
 background: linear-gradient(to bottom, #f4f4f4 0%,#efefef 40%,#dcdcdc 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#dcdcdc',GradientType=0 );
 box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
 }

La ventana modal llama a window-container que tendrá un background blanco con la sombra suave negro, mientras que el botón de cierre que vamos a utilizar tendrá un estilo con preferencias de Google Chrome ). La Ventana Modal también tiene el valor «opacity 0» por defecto y la opacidad de «transition 0.4» y valor de aceleración «ease-out». Ahora el zoom en la animación tendrá transform con el valor de «scale (1,2)», mientras que el zoom tendra el valor de «scale (0,7)».

 .zoomout {
 -webkit-transform: scale(0.7);
 -moz-transform: scale(0.7);
 -ms-transform: scale(0.7);
 transform: scale(0.7);
 }

 .window-container-visible {
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
 opacity: 1;
 }

 .window-container h3 {
 margin: 1em 0 0.5em;
 font-family: "Oleo Script";
 font-weight: normal;
 font-size: 25px;
 text-align: center;
 }

También hay una clase llamada «window-container-visible» que creamos antes, esta clase se inyecta a la ventana de contenedor para ejecutar el efecto de acercar o alejar la imagen de animación.

Aplicando el Jquery

La última cosa que hay hacer es crear un evento para mostrar nuestra ventana modal, utilizando evento de click al botón que mostrará la superposición del contenedor (overlay-container») aplicaremos el efecto «fadeIn ()» y esperar hasta 100ms para inyectar la clase de window-container-visible a window-container elemento contenedor de ventana para ejecutar la animación. Y lo último es agregar evento click para cerrar botón para ocultar ventana modal.

$('.button').click(function() {

	type = $(this).attr('data-type');

	$('.overlay-container').fadeIn(function() {

		window.setTimeout(function(){
		$('.window-container.'+type).addClass('window-container-visible');
		}, 100);

	});
});

$('.close').click(function() {
	$('.overlay-container').fadeOut().end().find('.window-container').removeClass('window-container-visible');
});

Espero le aya gustado el tutorial, aca les dejo la demo y tambien la descargar de los archivos, ( contraseña: antocas.com ), recuerden que el Css3 nos abre puertas a la creatividad, aprovechenlo.

Relacionados