Abriendo ventanas con CSS

Posted by On febrero 10, 2015 3 Comments

Una de las cuestiones que aparecen muchas veces cuando hacemos un desarrollo de una web es que necesitamos ventanas emergentes o diálogos.

Algo parecido a esto

x

Esto es la ventana

Aquí podemos introducir todo cuanto queramos, desde formularios a imágenes, sliders…

Llegado el caso podemos utilizar una infinidad de librerías de javascript, como puede ser el caso de JQueryUI, pero hay una forma muy sencilla de lograr abrir ventanas de forma muy eficiente, totalmente personalizables y con muy poco js.

Para poder entender este tutorial es necesario tener unos conocimientos mínimos de CSS y HTML.

Debemos de comenzar planteando el problema, que radica en: Abrir una ventana de dialogo cuando el usuario de la web hace click  en un botón de la misma.

Preparando el archivo

Bien, para ello, lo primero que haremos será un documento html5, utilizando nuestro editor de textos favorito (yo prefiero sublime), y preparar la estructura básica para comenzar a trabajar.

Nota: Voy a realizar todo el trabajo en un único archivo, pero ya sabéis que lo ideal es tener separado el CSS, el HTML y el JS (aunque en esta ocasión no hay apenas.)

Nuestro documento, al cual llamaremos ventanas.html, debe de estar más o menos así antes de empezar.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Abriendo ventanas</title>
</head>
<body>
	
</body>
</html>

Introduciendo texto y nuestro botón
Ahora vamos a ponerle un poco de texto de relleno, para crear la sensación de que fuera una web normal, para ello vamos a introducir una cabecera, texto pregenerado y un botón para abrir nuestra ventana.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Abriendo ventanas</title>
	<style>
	.abrir{
		margin: 10px;
		padding:5px;
		background-color: #F0AB00;
		cursor:pointer;
	}
	.abrir:hover{
		background-color: #F5DC60;
	}
	</style>
</head>
<body>
	<h2>Abriendo ventanas CSS</h2>
	You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.<br><br>
	<span class="abrir">Abrir ventana</span>
</body>
</html>

El CSS le da estilo a nuestro botón dandole un color de fondo que se cambia cuando pasamos el ratón por encima y le coloca una mano como si fuera un enlace.

Haciendo la ventana

Para crear nuestra ventana, camos a hacer un div, con la clase ventana y el id ventana1, de este modo si queremos añadir más ventanas será sumamente sencillo.

Dentro del div podemos introducir el código que queramos, desde texto, a imágenes, sliders, vídeos… de modo que añadimos el siguiente código en el body de nuestra web:

<div class="ventana" id="ventana1">
		<span class="cerrar">x</span>
		<h3>Esto es la ventana</h3>
		Aquí podemos introducir todo cuanto queramos, desde formularios a imágenes, sliders...
	</div>

Yo he introducido un span con una x para hacer un botón de cerrar la ventana, aunque se puede poner una imagen si se quiere. El diseño esta en cada uno, y yo pretendo hacer el tutorial simple y que el código os sirva directamente.

Una vez que tenemos nuestra ventana hecha como un div, es necesario introducirle el CSS, añadiendo lo siguiente en el estilo:

	.cerrar{
		float:right;
		margin: 5px;
		height:22px;
		width:22px;
		color:#ffffff;
		background-color: #ff0000;
		text-align:center;
		cursor:pointer;
	}
	.ventana{
		border: 2px solid #666666;
		position: absolute;
		width: 300px;
		visibility: hidden;
		border-radius: 5px;
		box-shadow: 10px 10px 10px #111;
		padding: 10px;
	}
	#ventana1{
		z-index: 10;
		right: 50%;
		top: 10%;
		background-color: rgba(256,256,256,0.98);
	}

En este código CSS podemos ver como se hace nuestro botón de cerrar, haciendolo flotar a la derecha, con un margin, un color de fondo, dandole color a la X, y finalmente haciendo que el ratón muestre una mano al pasar por encima.

Pero es en el resto donde esta lo interesante, ya que en el clase ventana creamos nuestra ventana con los estilos, y la volvemos invisible,  por lo que no se ve a simple vista, debemos de hacer que se vea, y para ello la preparamos en la id ventana 1, donde le damos un z-index por encima de la web, y la colocamos con right y top donde más nos interese, dándole un color de fondo con un poco de transparencia. (Como ya digo el estilo es cuestión de cada uno.)

Creando la funcionalidad

Ya solo nos queda darle funcionalidad a los botones para que la ventana se abra y se cierre, siendo está la única parte donde vamos a utilizar javascript.

Para ello modificaremos nuestro botón abrir para que nos quede así:

<span class="abrir" onclick="document.getElementById('ventana1').style.visibility='visible'">Abrir ventana</span>

Y nuestro botón para cerrar la ventana también debe modificarse y quedar así:

<span class="cerrar" onclick="document.getElementById('ventana1').style.visibility='hidden'">x</span>

De esta forma nuestra ventana ya se abre y se cierra correctamente.

Utilizando un poco la imaginación estoy seguro de que no solo le podréis dar una gran utilidad, si no que también podréis,  abrir diferentes ventanas en vuestra web de forma simple y sencilla.

El código completo de este sencillo script lo podéis ver aquí y utilizarlo como queráis.

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<!--Abriendo ventanas con CSS por MIALTO @_mialto_-->
	<title>Abriendo ventanas</title>
	<style>
	.abrir{
		margin: 10px;
		padding:5px;
		background-color: #F0AB00;
		cursor:pointer;
	}
	.abrir:hover{
		background-color: #F5DC60;
	}
	.cerrar{
		float:right;
		margin: 5px;
		height:22px;
		width:22px;
		color:#ffffff;
		background-color: #ff0000;
		text-align:center;
		cursor:pointer;
	}
	.ventana{
		border: 2px solid #666666;
		position: absolute;
		width: 300px;
		visibility: hidden;
		border-radius: 5px;
		box-shadow: 10px 10px 10px #111;
		padding: 10px;
	}
	#ventana1{
		z-index: 10;
		right: 50%;
		top: 10%;
		background-color: rgba(256,256,256,0.98);
	}
	</style>
</head>
<body>
	<h2>Abriendo ventanas CSS</h2>
	You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.<br><br>
	<span class="abrir" onclick="document.getElementById('ventana1').style.visibility='visible'">Abrir ventana</span>
	<div class="ventana" id="ventana1">
		<span class="cerrar" onclick="document.getElementById('ventana1').style.visibility='hidden'">x</span>
		<h3>Esto es la ventana</h3>
		Aquí podemos introducir todo cuanto queramos, desde formularios a imágenes, sliders...
	</div>

</body>
</html>