web-dev-qa-db-fra.com

Comment ajouter un DIV de superposition pour couvrir un DIV existant (à l'aide de JQuery)?

J'ai un DIV 'conteneur' qui peut avoir tous les styles CSS possibles comme: marge, rembourrage, bordure et position différente (fixe, relative, absolue).

Je souhaite afficher une icône de chargement au-dessus du DIV 'conteneur' et interdire à l'utilisateur de faire fonctionner n'importe quel contrôle dans le DIV 'conteneur'.

<div class="container">
 A lot of content here ...
</div>

Comment puis-je ajouter un DIV de superposition (à l'aide de JQuery) qui couvre la totalité de la zone visible DIV du "conteneur" (la zone de marge ne doit pas être couverte)?

Cordialement, Zach

jqueryoverlay
23
Zach

Si rien à changer en CSS, alors:

$("<div />").css({
    position: "absolute",
    width: "100%",
    height: "100%",
    left: 0,
    top: 0,
    zIndex: 1000000,  // to be on the safe side
    background: "url(/img/loading.gif) no-repeat 50% 50%"
}).appendTo($(".container").css("position", "relative"));

$("<div>Loading...</div>").css({
  position: "absolute",
  width: "100%",
  height: "100%",
  top: 0,
  left: 0,
  background: "#ccc"
}).appendTo($(".container").css("position", "relative"));
.container {
  border: 1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="container">
  A lot of content here ...
</div>

DEMO: http://jsfiddle.net/jKfTC/

61
VisioN