Come rendere invisibile il sottostante div?

Question

ho fatto div overlay con:

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

Fondamentalmente voglio questa sovrapposizione div per coprire tutta la mia pagina. E fa quello di cui ho bisogno, ma ho anche bisogno che le divs sottostanti siano invalicabili. Sono davvero invalicabile, ma solo in FF, Safari e Chrome. in IE e Opera è ancora possibile fare clic sui pulsanti sottostanti.

Qualcuno ha qualche idea su come posso ottenere questo "comportamento sottostante non apprezzabile"?

Answer 1

Aggiungere un gestore onclick per il div overlay.

Answer 2

È inoltre necessario utilizzare z-index per garantire che il nuovo div sia in cima a tutto il resto. Senza di questo attributo si è in balia del browser in termini che uno sarà sulla parte superiore e ricevere il onclick

Anche essere a conoscenza di un noto IE (vecchie versioni) bug che la selezione del tipo di ingresso ignora z-index

Answer 3

Se stai usando qualcosa come jQuery, si può fare qualcosa di simile

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

darai tutto nel vostro overlay (link, pulsanti, ecc) la classe di sovrapposizione, e questo in modo efficace disabilitare tutto il resto la tua pagina.

Answer 4

Lla sovrapposizione CSS con:

z-index: 10000; 

si prenderà cura di esso.

Answer 5

Questo può essere fatto facilmente utilizzando JavaScript:

• Creare un div mascherare l'intera pagina con un alto z-index
• Fare la cattura maschera tutti i clic
• Quando si toglie la maschera, la pagina diventa nuovamente cliccabile.

Questo approccio può naturalmente essere utilizzato su tutti gli elementi dom, non solo sul corpo. campione

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; 
    }) 

Lavorare qui: http://jsfiddle.net/GTPW3/3/

Answer 6

.class {pointer-events: none;}