Divisor Pop-Up

Usando el divisor fijo en el centro que aprendimos a utilizar anteriormente, podemos agregar un JavaScript para que este funcione como una ventana que puede ser abierta y cerrada. Es importante que la ventana no esté abierta por default y sea abierta tras cargar el cuerpo con <body onload="open()">, o de lo contrario, si el usuario no tiene JavaScript activado, no tendrá forma de cerrarlo.

Abrir

[X]

¡Fijo en el centro!

Líneas de Texto

Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto

El código:

<script type="text/javascript">
function open(){
	document.getElementById('pop').style.display='block';
}
function close(){
	document.getElementById('pop').style.display='none';
}
</script>

Como implementarlo:

<div id="pop">
<p><a href="javascript:close()">[X]</a></p>
<p>¡Fijo en el centro!</p>
</div>

<p><a href="javascript:open()">Abrir</a></p>

<body onload="open()">

Forma accesible

Otro punto a tomar en cuenta es que si la información a desplegar es importante, debe haber una forma alterna de poderla leer. A continuación mostramos un ejemplo de como hacerlo de forma accesible:

<p><a href="info.html" onclick="open();return false">Abrir</a></p>

Usando una caja de registro

Mostrar

<p><input type="checkbox" onclick="visible()" checked="checked" />Mostrar</p>

<script type="text/javascript">
function visible(){
	if (document.getElementById('pop').style.display=='none')
			document.getElementById('pop').style.display='block';
	else
			document.getElementById('pop').style.display='none';
}
</script>