¿Cómo hacer una pantalla completa div y encima de todos los demás elementos con jQuery?

Question

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

¿Hay una manera fácil de hacerlo?

Answer 1

Al hacerlo, ¿desea desactivar el usuario/entrada?

Comprobar esto: http://malsup.com/jquery/block/

elementos de bloqueo: http://malsup.com/jquery/block/#element

bloqueo de página entera: http://malsup.com/jquery/block/#page

Rgds

Answer 2

para que sea a pantalla completa, establecidos estos estilos:

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

Parte superior ut it en la parte superior, establezca el valor z-index en algo más alto que el resto de los elementos en la página.

z-index: 99; 

se pueden establecer todos estos con una hoja de estilo, a continuación, sólo tiene que utilizar jQuery para mostrar/ocultar la div.

Answer 3

Definir un estilo overlay o algo así:

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

continuación, puede añadir la nueva clase como esta usando jQuery:

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

Si desea agregar un evento de clic que lo haría haga algo como esto:

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

O bien, podría agregar display:none a la clase .overlay por lo que está escondido en la carga de la página, a continuación, haga que su función jQuery click muestran así:

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

Answer 4

completa ajax pantalla del cargador, con un poco de opacidad.

usando

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

para activarlo.

#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>