Si vous ne le savez pas encore, vous pouvez jeter un œil à cet exemple simple ci-dessous.
La copie de code est la suivante:
<html>
<adal>
<Title> Après une fenêtre apparue, la couche suivante n'est pas opérationnelle </TITME>
<cript>
fonction show () // montre une couche cachée et une couche pop-up
{
var hideoBj = document.getElementById ("hideBg");
hidebg.style.display = "bloc"; // montre une couche cachée
hidebg.style.height = document.body.clientHeight + "px"; // Définissez la hauteur de la couche cachée à la hauteur de la page actuelle
document.getElementById ("hidebox"). style.display = "bloc"; // montre la couche pop-up
}
Fonction masquait () // supprimer les calques cachés et les couches pop-up
{
document.getElementById ("hidebg"). style.display = "Aucun";
document.getElementById ("hidebox"). style.display = "Aucun";
}
</cript>
<style>
Corps {marge: 0px; rembourrage: 0px; texte-aligne: Centre;}
#HideBg {position: Absolute; Left: 0px; top: 0px;
Color d'arrière-plan: # 000;
Largeur: 100%; / * La largeur est définie à 100%, de sorte que le calque d'arrière-plan caché peut couvrir la page d'origine * /
filtre: alpha (opacité = 60); / * Définir la transparence à 60% * /
Opacité: 0,6; / * Réglez la transparence à 60% dans le navigateur non IE * /
Affichage: aucun; / * //www.vevb.com * /
Z-Index: 2;}
#Hidebox {position: absolue; largeur: 400px; hauteur: 300px; en haut: 200px; gauche: 30%; fond-couleur: #ffff; affichage: aucun; curseur: pointeur; z-index: 3;}
#Content {Text-Align: Center; Cursor: Pointer; Z-Index: 1;}
</ style>
</ head>
<body>
<div id = "hidebg"> </div>
<div id = "hidebox" onclick = "hide ();"> cliquez pour fermer </div>
<div id = "contenu" onclick = "show ();"> cliquez pour essayer </div>
</docy>
</html>