Come creare un div fullscreen e in cima a tutti gli altri elementi con jQuery?

Question

<div style="background-color:grey"> 
</div> 

C'è un modo semplice per farlo?

Answer 1

Durante questa operazione, si desidera disabilitare l'utente/l'input?

Controllare questo: http://malsup.com/jquery/block/

elementi di blocco: http://malsup.com/jquery/block/#element

blocco intera pagina: http://malsup.com/jquery/block/#page

Rgds

Answer 2

per renderlo a schermo intero, impostare questi stili:

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

Superiore in alto, imposta il valore z-index su un valore superiore rispetto al resto degli elementi sulla pagina.

È possibile impostare tutti questi con un foglio di stile, quindi utilizzare solo jQuery per mostrare/nascondere il div.

Answer 3

definire uno stile overlay o qualcosa del genere così:

<style> 
    .overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
    } 
</style> 

Quindi è possibile aggiungere la nuova classe come questa utilizzando jQuery:

$('#myDiv').addClass('overlay'); 

Se si desidera aggiungere un evento click si farebbe fare qualcosa del genere:

$('a').click(function(){ 
    $('#myDiv').addClass('overlay'); 
} 

Oppure, è possibile aggiungere display:none a la classe .overlay quindi è nascosto al caricamento della pagina, quindi avere il vostro jQuery click funzione spettacolo come questo:

$('a').click(function(){ 
    $('.overlay').show('slow'); 
} 

Answer 4

intero schermo ajax loader, con una certa opacità.

utilizzando

$('#mydiv').show(); 
$('#mydiv').hide(); 

per attivarla.

#mydiv { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
    background-color:grey; 
    opacity: .8; 
} 

.ajax-loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; /* -1 * image width/2 */ 
    margin-top: -32px; /* -1 * image height/2 */ 
    display: block;  
} 

<div id="mydiv"> 
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/> 
</div>