Comment puis-je désactiver l'intégralité d'une page HTML sur un événement comme dans le cas de l'alerte JavaScript?

Je suis l'élaboration d'une page web en JSP/HTML dans lequel je dois désactiver/gris à l'écran une page web entière sur un événement de clic de bouton, de sorte qu'un utilisateur ne peut pas accéder à l'autre élément de la page web jusqu'à ce qu'il est désactivé.

Comment puis-je y arriver?

Voulez-vous dire quelque chose comme un modal?
Une couche sur le dessus. Exemple : fczaja.blogspot.in/2009/02/disable-all-page-elements-with.html
Utilisation colorbox jacklmoore.com/colorbox

OriginalL'auteur Tokendra Kumar Sahu | 2012-05-07

  1. 14

    CSS: 

    #cover {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0.80;
   background: #aaa;
   z-index: 10;
   display: none;
}

    HTML :

    <body>
<div id="wrap">
 //your normal contents here
</div>
<div id="cover"> </div>
</body>

    jquery :

    //trigger on whatever event required.
$("#cover").fadeIn(100);
alert("something");
$("#cover").fadeOut(100); //after done.
    Mais cela ne veut pas bloquer le clavier. Vous pouvez toujours l'Onglet & Entrer pour obtenir un bouton cliqué.

    OriginalL'auteur KBN

  2. 7

    Vous pouvez utiliser jQuery BlockUI Plugin.

    C'est simple.

    merci! son simple. 😉
    vous êtes les bienvenus @Harsha

    OriginalL'auteur blasteralfred Ψ

  3. 4

    Il y a peut des moyens pour y parvenir..
    mais le plus simple qui, je suis tombé sur pour utiliser la balise div
    de couverture de la page, puis l'enlever lorsque l'événement est terminé

    $('body').append('<div id="over" style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');

    Cela va ajouter une balise div à l'ensemble du corps.À la fin de la fonction inclure cette

    $("#over").remove();

    OriginalL'auteur vicky

  4. 2

    Si vous pouvez utiliser JQuery, et ont besoin d'une entrée de l'utilisateur sur le dessus de la zone grise, essayez JQUery UI Dialog, et le définir comme modal

    OriginalL'auteur Eran Medan

  5. 1

    La technique de base consiste à ajouter un 100% de la largeur et de la hauteur de la div au-dessus de tout.

    $('body').append('<div class="cover"/>').css({
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: '999'
});

    Puis faire de votre fenêtre modale z-index: 1000.

    OriginalL'auteur elclanrs