¿Cómo hacer que el div subyacente no se pueda cliquear?

Question

hice div superposición con:

position: absolute; top: 0; left: 0; widht: 100%; height: 100%; 

Básicamente quiero que esta superposición div para cubrir mi página entera. Y hace lo que necesito, pero también necesito que los divs subyacentes no se puedan cliquear. De hecho, no se pueden hacer clic, pero solo en FF, Safari y Chrome. en IE y Opera aún puede hacer clic en los botones que se encuentran debajo.

¿Alguien tiene alguna idea sobre cómo puedo lograr este "comportamiento subyacente que no se puede cliquear"?

Answer 1

Agregue un controlador onclick para la div de superposición.

Answer 2

También es necesario utilizar z-index para asegurarse de que su nueva div está encima de todo lo demás. Sin este atributo que está a merced del navegador en cuanto a cuál va a estar en la cima y recibir el onclick

También ser conscientes de una IE conocido (versiones anteriores) problema que la selección del tipo de entrada pasa por alto índice z

Answer 3

Si está usando algo como jQuery, puede hacer algo como

$("a:not(.overlay)").click(function(e) { e.preventDefault(); }); 
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); }); 

Dará a conocer a todo en su superposición (enlaces, botones, etc.) la clase de superposición, y esto va a desactivar efectivamente todo lo demás en tu pagina.

Answer 4

Lla CSS plantilla con:

z-index: 10000; 

se hará cargo de ella.

Answer 5

Esto se puede hacer fácilmente usando javascript:

• Crear un div enmascarar la página entera con un alto índice z
• Hacer la captura máscara de todos los clics
• Al quitar la máscara, la página se vuelve a hacer clic de nuevo.

Este enfoque, por supuesto, se puede utilizar en todos los elementos dom, no solo en el cuerpo. muestra

var mask = $('<div></div>') 
    .css({ 
    position: 'absolute', 
    width: '100%', 
    height: '100%', 
    top: 0, 
    left: 0, 
    'z-index': 10000 
    }) 
    .appendTo(document.body) 
    .click(function(event){ 
    event.preventDefault(); 
    return false; 
    }) 

Trabajar aquí: http://jsfiddle.net/GTPW3/3/

Answer 6

.class {pointer-events: none;}