Ventana modal, modalbox con css

Ventana modal con CSSExperimentando con las transformaciones css vi que era posible usar porcentajes, incluso con valores negativos. Automáticamente se me ocurrió que podría ser posible entonces posicionar cualquier elemento usando un valor en negativo del 50%, lo que le quitaría la mitad de su tamaño en posición, quedando así posicionado en el centro.

Teniendo esa teoría y experimentando se consigue por ejemplo posicionar una ventana modal en el centro de la pantalla.

Puedes jugar con el código y ver los pasos a continuación.

Nuestro código, un modalbox con CSS

Creando la ventana modal

El código para crear la ventana modal como siempre, debe ser algo sencillo para no recargar la página con elementos inútiles. En cualquier lugar de nuestra página (idealmente al final del contenido), añadiremos los siguientes elementos:

<div id="modal" class="styled">
	Contenido del modal
</div>
<div id="modal-background"></div>

Debemos crear dos divs, uno contendrá el contenido del modal y el otro será el fondo del modal, he intentado por todos los medios evitar el div que muestra el fondo del modal, pero actualmente no se puede colocar un elemento detrás de si mismo con el uso de los pseudo-selectores ya que los pseudo-selectored :before y :after insertan el elemento dentro del padre, con lo que eso hace que no sea posible.

Posicionando la ventana modal con css

El código CSS que posicionará la ventana modal en la pantalla es el siguiente:

#modal {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	box-sizing: border-box;
	z-index: 10;
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#modal-background {
	display: none;
	position: fixed;
	background: #000;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

En un inicio el modal estará oculto (lo deberemos mostrar posteriormente con javascript). El modal se posiciona centrado al 50, 50% de la página, después haciendo uso de transform translate, lo movemos al 50% de su tamaño para centrarlo definitivamente.

Estilando la ventana modal

Para acabar la parte de css, deberemos estilar la ventana al gusto.

#modal.styled {
	width: 50%;
	max-height: 350px;
	min-width: 100px;
	overflow: auto;
	background: #fff;
	padding: 12px 14px;
	border: 1px solid;
	border-color: #aaa #999 #888;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	box-shadow: 0 3px 14px -4px #000;
	-ms-box-shadow: 0 3px 14px -4px #000;
	-moz-box-shadow: 0 3px 14px -4px #000;
	-webkit-box-shadow: 0 3px 14px -4px #000;
	box-shadow: 0 3px 14px -4px #000;
}

Mostrando y ocultando con Javascript

Llegamos al final, tenemos nuestra ventana creada, pero… no se ve! La hemos de mostrar, fácil y sencillo, en el evento de algún botón, enlace o lo que deseemos que lo muestre, le añadimo lo siguiente:

// Para jQuery
$( '#modal' ).fadeIn();
$( '#modal-background' ).fadeTo( 500, .5 );

Y en el proceso de ocultar…

$( '#modal, #modal-background' ).fadeOut();

Con esto tendremos nuestro código completo, una ventana modal sencilla, funcional y perfecta haciendo uso de CSS3 y html.

Corre la voz!

Comentarios

  1. ()

    Intersante el procedimiento, lo voy a realizar en un proyecto. Gracias por la explicación a detalle, seguro me servirá de mucho.

  2. ()

    Perfecto Adriá. Muchas gracias! Llevaba ya un par de dias visitando paginas pero con ninguna conseguia el efecto definitivo o adecuado. Sencillamente simple y efectivo. Genial!


Escribir un comentario

Escribe lo que desees, si quieres incluir código hazlo usando los tags <pre>

Nombre:
Email:
Website: