La copie de code est la suivante:
<! Doctype html public "- // w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html>
<adal>
<Title> Nouveau document </TITME>
<meta charset = "utf-8">
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<Meta name = "auteur" content = "">
<Meta name = "keywords" contenu = "">
<Meta name = "Description" content = "">
<style type = "text / css">
*
{
rembourrage: 0px;
marge: 0px;
}
#Iv
{
Largeur: 900px;
Hauteur: Auto;
Position: absolue;
Z-Index: 1000;
Border: 2px solide #ffffff;
Contexte: #FFFFFF;
}
</ style>
</ Head>
<body>
<div id = "idiv" style = "affichage: aucun;">
<a href = "javascript: void (0)" onclick = "closev ()"> cliquez pour fermer le calque </a>
<br/> Différences de document.DocumentElement <br/> Différences dans Document.DocumentElement
</div>
<div> <a href = "javascript: void (0)" id = "show" onclick = "show ()"> cliquez pour ouvrir le calque pop-up! </div>
</docy>
<script langue = "javascript">
fonction show ()
{
var idiv = document.getElementById ("idiv");
Idiv.style.display = "bloc";
// Les pièces suivantes doivent être centrées pour afficher la couche pop-up
Idiv.style.left = (document.DocumentElement.ClientWidth-idiv.ClientWidth) /2+Document.DocumentElement.Scrollleft+ "PX";
//alert(Document.body.scrolltop)
var aa_scrolltop = document.documentElement.scrolltop || window.pageyoffset || document.body.scrolltop;
Idiv.style.top = (document.DocumentElement.ClientHeight-idiv.ClientHeight) / 2 + aa_scrolltop + "px";
// Il y a un problème ici. La couche pop-up est centrée à gauche et à droite, mais la hauteur n'est pas centrée, et elle est affichée dans la partie supérieure, ce qui fait une partie // partie. Ajoutez donc temporairement la marge ci-dessous.
// Les parties suivantes rendent la page entière gris-clicable
var procbg = document.CreateElement ("div"); // Créer un div d'abord
procbg.setAttribute ("id", "mybg"); // définir l'ID du div
procbg.style.background = "# 000000";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fixe";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0,6";
procbg.style.filter = "alpha (opacité = 70)";
// Annuler la barre de défilement
Document.Body.ApendChild (procbg);
document.body.style.overflow = "auto";
// Les parties suivantes réalisent l'effet de traînée de la couche pop-up (si vous voulez déplacer la div dans la couche pop-up, déconnectez-vous et supprimez ce qui suit)
/ *
var posx;
var posy;
Idiv.onmousedown = fonction (e)
{
if (! e) e = window.event; // c'est-à-dire
posx = e.clientx - parseInt (idiv.style.left);
posy = e.clienty - parseInt (idiv.style.top);
document.onmousemove = mousmove;
}
document.onmouseup = function ()
{
document.onMouseMove = null;
}
Fonction MouseMove (EV)
{
if (ev == null) ev = window.event; // ie
Idiv.style.left = (ev.clientx - posx) + "px";
Idiv.style.top = (ev.clienty - posy) + "px";
} * /
}
fonction closev () // ferme la couche pop-up
{
var idiv = document.getElementById ("idiv");
var mybg = document.getElementById ("mybg");
document.body.removechild (mybg);
Idiv.style.display = "Aucun";
document.body.style.overflow = "auto"; // restaurer la barre de défilement de la page
//Document.getElementByid("mybg").style.display="none ";
}
</cript>
</html>
// modifie la couche pop-up ci-dessus et faites votre propre fonction de chargement. Déterminez si la page a été chargée et masquez le chargement.gif après l'achèvement
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<adal>
<Title> Nouveau document </TITME>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
</ head>
<body onload = "subsomething ()">
</docy>
<script type = "text / ecmascript">
Fonction Show (AddressImg, img_w, img_h) {
// Obtenez la hauteur de la page
var h = (document.DocumentElement.ClientHeight> document.DocumentElement.ClientHeight)? document.DocumentElement.ScrollHeight: document.DocumentElement.ClientHeight;
// Obtenez la largeur de la page
var w = (document.documentElement.scrollWidth> document.documentElement.clientWidth)? document.DocumentElement.ScrollWidth: document.DocumentElement.ScrollWidth;
var procbg = document.CreateElement ("div"); // Créer un div d'abord
procbg.setAttribute ("id", "mybg"); // définir l'ID du div
procbg.style.background = "# 555";
procbg.style.width = "100%";
procbg.style.height = "100%";
procbg.style.position = "fixe";
procbg.style.top = "0";
procbg.style.left = "0";
procbg.style.zindex = "500";
procbg.style.opacity = "0,6";
procbg.style.filter = "alpha (opacité = 70)";
// Annuler la barre de défilement
Document.Body.ApendChild (procbg);
document.body.style.overflow = "auto";
var pimg = document.CreateElement ("img"); // Créer un IMG
pimg.setAttribute ("id", "bg_img"); // définir l'ID du div
PIMG.SetAttribute ("SRC", AddressImg); // définir l'ID du div
var img_w = (w - img_w) / 2;
var img_h = (h - img_h) / 2;
pimg.style.top = img_h + "px";
pimg.style.left = img_w + "px";
pimg.style.position = "fixe";
pimg.style.opacity = "0,9";
document.getElementById ("MyBG"). APPENDCHILD (PIMG);
}
fonction closev () // ferme la couche pop-up
{
var mybg = document.getElementById ("mybg");
document.body.removechild (mybg);
document.body.style.overflow = "auto"; // restaurer la barre de défilement de la page
//Document.getElementByid("mybg").style.display="none ";
}
show ('charger / charger3.gif', '100', '100');
document.onreadystateChange = subsomething; // Exécuter cette méthode lorsque l'état de chargement de la page change.
fonction subsomething () {
if (document.readystate == "complet") {// entre lorsque l'état de chargement de la page est complètement terminé
closev ();
}
}
</cript>
</html>