2010-08-23 12 views
4

J'utilise cet extrait pour ajouter une superposition à un site entier:Surplus de tout le site div?

$(function() { 

    var docHeight = $(document).height(); 

    $("body").append("<div id='overlay'></div>"); 

    $("#overlay") 
     .height(docHeight) 
     .css({ 
     'opacity' : 0.4, 
     'position': 'absolute', 
     'top': 0, 
     'left': 0, 
     'background-color': 'black', 
     'width': '100%', 
     'z-index': 5000 
     }); 

}); 

Il fonctionne très bien, seulement je besoin d'un élément à s'asseoir au-dessus de cet ID de superposition. J'ai donné à cet élément un z-index supérieur au 5000 ici, mais il ne semble jamais monter au-dessus de la superposition grise --- des idées?

+0

Vous essayez de créer une boîte de dialogue modale? Si c'est le cas, au lieu de faire deux divs ajouter un div avec du contenu et avoir un arrière-plan gris pour remplir l'ensemble du document. –

+0

Pourriez-vous nous montrer toutes les règles CSS pour l'élément que vous voulez mettre en haut? Avez-vous essayé d'utiliser la position: relative? Est-ce que cela se produit dans tous les navigateurs, ou juste un? – Stephen

+0

Gardez à l'esprit qu'un élément z-index ne peut jamais dépasser celui de son parent. –

Répondre

0

Donnez-le également position:absolute ou position:relative.

0

Assurez-vous que l'élément que vous voulez est positionné superposée (comme absolu ou relatif) .. autre z-index sage ne signifie rien

1

Assurez-vous qu'il est un frère et un enfant direct de body pour garantir que ça va marcher dans IE ainsi que de donner une position autre chose que static et plus z-index que 5000.

0

1er contrôle où exactement le 2ème élément est ajouté dans d'autres termes, si ur attribuer cette valeur dans JQuery mais ur en utilisant css simple pour coder la Les valeurs des deuxièmes éléments peuvent être conflictuelles. Aussi, vous devriez essayer d'utiliser des guillemets où l'on trouve des valeurs ur qui utilisent des guillemets doubles avec des valeurs d'opacité. Juste une suggestion mais au lieu d'essayer d'assigner dynamiquement des éléments en utilisant JQuery et de leur donner des propriétés, je vous suggère d'essayer css simple en donnant les attributs des éléments et d'utiliser JQuery pour manipuler ce qui doit être calculé et/ou ne peut pas être accompli css seul. Alors ur code serait comme ceci:

$(function() { 

    var docHeight = $(document).height(); 

    $("body").append("<div id='overlay'></div>"); 
    $("#overlay").height(docHeight); 
    $("#overlay").css({"opacity":"0.4"}); 
}); 

et l'élément aurait également les propriétés affectées par le fichier css par défaut