Ce chapitre présente comment cliquer sur un bouton pour faire apparaître une fenêtre centrée, et cette fenêtre a un effet de couche de masquage translucide. ., le code introduit ci-dessous peut simplement implémenter cette belle sœur.
Le code est le suivant:
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<meta name = "auteur" content = "http://www.softwhy.com/" />
<Title> Ant Tribe </Title>
<style type = "text / css">
#disparaître {
Affichage: aucun;
Position: absolue;
en haut: 0%;
Gauche: 0%;
Largeur: 100%;
hauteur: 100%;
Color en arrière-plan: noir;
Z-Index: 1001;
-moz-opacité: 0,8;
Opacité: .80;
filtre: alpha (opacité = 80);
}
#lumière{
Affichage: aucun;
Position: absolue;
TOP: 25%;
Gauche: 25%;
Largeur: 50%;
hauteur: 50%;
rembourrage: 16px;
Border: Orange solide 3px;
Color d'arrière-plan: blanc;
Z-Index: 1002;
débordement: auto;
}
</ style>
<script type = "text / javascript">
window.onload = function () {
var linkbt = document.getElementById ("linkbt");
var light = document.getElementById ('Light');
var fade = document.getElementById ('fade');
var closebt = document.getElementById ("closebt");
linkbt.onclick = function () {
light.style.display = 'bloc';
fade.style.display = 'bloc';
}
closebt.onclick = function () {
light.style.display = 'Aucun';
fade.style.display = 'Aucun';
}
}
</cript>
</ head>
<body>
<a href = "javascript: void (0)" id = "linkbt"> cliquez ici pour ouvrir la fenêtre </a>
<div id = "Light"> <a href = "javascript: void (0)" id = "closebt"> Fermer Window </a> </div>
<div id = "fade" "> </div>
</docy>
</html>
Le code ci-dessus implémente nos exigences et ce qui suit introduit brièvement son processus de mise en œuvre.
1. Principe de mise en œuvre:
Par défaut, la couche de masque et la fenêtre sont cachées et invisibles. Les deux éléments utilisent le positionnement absolu et définissent la valeur d'attribut d'indice Z de la fenêtre centrée pour être supérieure à la couche de masque, afin qu'elle puisse être couverte sur la couche de masque. Lorsque le bouton Fermer est cliqué, le calque et la fenêtre du masque peuvent être cachés et le principe est à peu près le même.