Otra versión actualizada del código anterior. Ésta corrige algunos espacios que no cubre la capa. Por supuesto, no es un verdadero "deshabilitado" en ningún caso. Porque se puede seleccionar con el botón secundario o con la combinación de teclas.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>DESHABILITABLE. </title>
<style type='text/css'>
body{overflow:auto; color:#ff0; background-color:#000}
p {color:#fff}
#tapa {position:fixed; height:0; overflow:hidden; background:url("http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif") transparent; }
#tapa {_position:absolute; top:0; left:0; }
</style>
<script type="text/javascript">
function deshabilitar(){
var deshabilitado = confirm("¿Quiere deshabilitar el documento?.");
if(deshabilitado){
document.body.style.overflow = "hidden";
document.getElementsByTagName("html")[0].style.overflow = "hidden";
var altura = document.body.scrollHeight * 2;
var anchura = document.body.scrollWidth * 2;
//alert(altura + " " + anchura)
document.getElementById("tapa").style.height = altura+"px";
document.getElementById("tapa").style.width = anchura+"px";
}
}
</script>
</head>
<body>
<div id="tapa"></div>
<h1>Documento que se deshabilita.</h1>
<p>Click en el enlace "Deshablitar" para cubrir el documento con una capa semitransparente del mismo color que el fondo.</p>
<h2>qwertyuiop</h2>
<h2><a href="javascript:deshabilitar()" onfocus="this.blur()">Deshabilitar </a></h2>
<img alt="Logo" height="108" width="207" src=
"http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif"><br>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<h2>qwertyuiop</h2>
<div style="height:500px; background:yellow; width:50px"></div>
<h2 style="text-align:center">Imagen :<br>
<img alt="Imagen" height="64" width="64" src="http://img43.imageshack.us/img43/5321/semitransnegro7dw.gif" style="background:#fff; margin:20px;"></h2>
<h2><a href="javascript:deshabilitar()" onfocus="this.blur()">Deshabilitar </a></h2>
</body>
</html> El
hack de CSS se puede eliminar usando posición absoluta en todos los casos (el ejemplo lo probé en
IE6 y
FF2) y agregando en el escript la línea en rojo
Código:
document.getElementById("tapa").style.width = anchura+"px";
document.body.style.position = "fixed";
}
pero después no se puede desplazar el documento con el teclado en
FF.