Desactivar todos los elementos en un pagina

helena71 · #1 (**permalink**) 17/01/2013, 09:35

Buenos dias, estoy construyendo un pagina y tengo una duda, no se si es muy loca mi idea o si es posible, me ayudan por favor.

Con document.getElementById('idDelCampo').disabled = "disable", desactivo un elemento en un pagina.

¿Existe alguna forma de desactivar o deshabilitar TODOS los elementos de una pagina sin tener que hacer un document.getElementById('idDelCampo') por cada elemento?

Lo que necesito es algo similar a lo que sucede cuando se activa una alert() en javascript. En este caso todos los elementos de la pagina se desactivan/deshabilitan hasta que la ventana del alert() se cierra.

Lo necesito para desactivar todos los elementos cuando abro un DIV a traves de una funcion.

Gracias

Panino5001 · #2 (**permalink**) 17/01/2013, 10:11

Lo que normalmente se hace es colocar un elemento de bloque por encima, con un z-index más alto que el resto de los elementos. Al mismo tiempo, suelen ocultarse los object y embed -a menos que tengan wmode opaque o transparent- y los campos select para viejas versiones de explorer; esto último se hace para que queden debajo de la capa -si no se hace, quedan por encima y no hay z-index que valga-

helena71 · #3 (**permalink**) 17/01/2013, 13:56

Panino5001, no sabia que existia la propiedad z-index en CSS, voy a revisar como funciona y unos ejemplos, si algo te molesto nuevamente.

Gracias

helena71 · #4 (**permalink**) 18/01/2013, 12:46

Estoy utilizando Z-INDEX para que las capas que contienen los enlaces Boton-1 y Boton-2 se desactiven cuando se abre la ventana al presionar el Boton-1. Alguien me puede decir porque no se desactivan

Lo que necesito es algo similar a lo que sucede cuando se activa una alert() en javascript. En este caso todos los elementos de la pagina se desactivan/deshabilitan hasta que la ventana del alert() se cierra.

Código HTML:

Ver original<html>
 
<head>
 
<style type="text/css"> 
 
 #enlace1
 {
 position: absolute;
 top: 10px;
 left: 0px;
 z-index: 1;
 }
 
 #enlace2
 {
 position: absolute;
 top: 10px;
 left: 175px;
 z-index: 2;
 }
 
 #ventana1
 {
 position: absolute;
 top: 10px;
 left: 350px;
 z-index: 3;
 }
 
</style>
 
<script type="text/javascript">
 
function ventana1()
{
    var ventana = document.getElementById('ventana1');
    ventana.style.display = 'block';
}
 
function cerrar()
{
    var ventana = document.getElementById('ventana1');
    ventana.style.display = 'none';
}
 
</script>
 
</head>
 
<body>
 
 <div class="enlace-1"><a name="boton_1" id="boton-1" href="javascript:ventana1();">Boton-1</a></div>
 <div class="enlace-2"><a name="boton_2" id="boton-2" href="javascript:ventana2();">Boton-2</a></div>
 
 <br>
 <br>
 
 <div class="ventana1" id="ventana1" style="position: fixed; width: 330px; height: 215px; border: #333333 1px solid; background-color: #FFFFFF; color: #000000; display:none;">
  <div><input onclick="cerrar()" type="button" value=" Cerrar " /></div>
 </div>
 
</body>
</html>

Gracias

emprear · #5 (**permalink**) 18/01/2013, 21:09

un poco confusa la explicación, pero supongo que lo que querés es esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Overlay</title>
<style type="text/css">
/*<![CDATA[*/
html,body{
height: 100%;
margin: 0;
padding: 0;
border: none;
}
#ocultar{
 display: none;
 position:fixed;
 background:#000;
 width: 100%;
 height: 100%;
 opacity: 0.8;
 margin: 0;
 padding: 0;
 border: none;
 top:0;
 left:0;
 z-index: 999;
text-align: center;
padding-top: 200px;
overflow:hidden;
 }
 
#cerrar{
background: red;
color: #FFF;
border: solid red 2px;
border-radius: 5px;
position: absolute;
z-index: 1000;
text-align: center;
cursor: pointer;
width: 100px;
padding: 8px;
top: 40%;
left: 50%;
margin-left: -50px;
}
 
/*]]>*/
</style>
 
<script type="text/javascript">
//<![CDATA[
 
 function ocultar(){
 document.getElementById('ocultar').style.display ="block";
 }
 function desactivar(){
document.getElementById('hola').disabled = true;
}
//]]>
</script>
 
</head>
<body>
<div id="ocultar"><div onclick="this.parentNode.style.display ='none';" id="cerrar">cerrar</div></div>
<button onclick="ocultar();">ocultar todo</button>
<h1>xxxx</h1>
<h2>xxxxx</h2>
<button onclick="desactivar()">alerta</button>
<form action="#">
<input type="text" value="hola" name="hola" id="hola" />
</form>
</body>
</html>

saludos