desactivar todos los elementos de la página con la función modal utilizando jQuery

Question

Deseo desactivar todos los elementos de la página sobre una acción. Como la modal que se encuentra en la interfaz de usuario de JQuery.

Al igual que en una acción ajax .. deseo de mostrar una notificación y al mismo tiempo se activará la función modal. Y después de la solicitud, necesita volver a habilitar los elementos de la página.

¿Hay alguna opción disponible en jQuery la base de ese o cualquier plugins?

Answer 1

Los elementos de la página no están deshabilitados, lo que sería bastante tedioso, pero más bien, se superpone un div semitransparente sobre todos los demás elementos de la página. Para ello, es probable que hacer algo como

// Declare this variable in the same scope as the ajax complete function 
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay'); 

Y el CSS:

#overlay { 
    position: fixed; 
    height: 100%; 
    width: 100%; 
    z-index: 1000000; 
    background: url('link/to/semitransparent.png'); 
} 

A continuación, una vez que la acción se ha completado, sólo tiene que quitar de esta manera:

overlay.remove(); 

n necesita incluir jQuery UI si esto es lo único que necesita.

Answer 2

Una manera fácil de lograr esto es definir una clase css de esta manera:

.dark-class 
{ 
    background-color: #F0F0F0; 
    filter:alpha(opacity=50); /* IE */ 
    opacity: 0.5; /* Safari, Opera */ 
    -moz-opacity:0.50; /* FireFox */ 
    z-index: 20; 
    background-repeat:no-repeat; 
    background-position:center; 
    width: 100%; 
    height: 100%; 
    position:absolute; 
    top: 0px; 
    left: 0px; 
} 

Uso jQuery para agregar esta clase a un div vacío que es el primer hijo del elemento de cuerpo. Elimina la clase para deshabilitar el modo modal.

Su notificación debe tener un índice z mayor que el índice z de la clase oscura. Todos los artículos que necesitan ser deshabilitados deben tener un índice Z más bajo.

Answer 3

me gusta la idea de Jiang pero usted no necesita una imagen con la siguiente hoja de estilo de superposición.

#overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #000; 
    opacity: 0.8; 
    filter: alpha(opacity=80); 
    z-index:50; 
} 

Answer 4

Intenta agregar un estilo de "pointer-events: none;"; Al cuerpo. Para eliminarlo, utilice los eventos de puntero: automático;

Más información aquí https://css-tricks.com/almanac/properties/p/pointer-events/ A pesar de que puede haber problemas con navegadores anteriores no lo apoyan