Cet article décrit la méthode pour faire apparaître un effet de masque transparent gris-bleu plein écran par JS + CSS. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Il y a de tels effets sur de nombreux sites Web. Après avoir effectué une certaine opération, un masque translucide gris-noir apparaîtra. Le contenu spécifié peut être exploité dessus, comme une boîte de connexion et d'autres contenus. Préduisons comment réaliser cet effet. L'exemple de code est le suivant:
Copiez le code comme suit: <! Doctype html>
<html>
<adal>
<meta charset = "utf-8">
<meta name = "auteur" content = "// www.vevb.com/" />
<Title> Comment faire apparaître un effet de masque transparent gris-bleu plein écran - wulin.com </Title>
<style type = "text / css">
*
{
marge: 0px;
rembourrage: 0px;
}
.zhezhao
{
Largeur: 100%;
hauteur: 100%;
Color d'arrière-plan: # 000;
filtre: alpha (opacité = 50);
-moz-opacité: 0,5;
Opacité: 0,5;
Position: absolue;
gauche: 0px;
En haut: 0px;
Affichage: aucun;
Z-Index: 1000;
}
.se connecter
{
Largeur: 280px;
hauteur: 180px;
Position: absolue;
en haut: 200px;
Gauche: 50%;
Color d'arrière-plan: # 000;
marge-gauche: -140px;
Affichage: aucun;
Z-Index: 1500;
}
.contenu
{
marge: 50px;
Couleur: rouge;
Heure de ligne: 200px;
hauteur: 200px;
Texte-aligne: Centre;
}
</ style>
<script type = "text / javascript">
window.onload = function ()
{
var zhezhao = document.getElementById ("zhezhao");
var login = document.getElementById ("Login");
var bt = document.getElementById ("bt");
var btclose = document.getElementById ("btclose");
bt.onclick = function ()
{
zhezhao.style.display = "bloc";
login.style.display = "bloc";
}
btclose.onclick = function ()
{
zhezhao.style.display = "Aucun";
login.style.display = "Aucun";
}
}
</cript>
</ head>
<body>
<div id = "zhezhao"> </div>
<div id = "Login"> <Button id = "btclose"> Cliquez pour fermer </futton> </div>
<div> wulin.com vous accueille, <bouton id = "bt"> cliquez pour faire exploser masque </fontificateur> </div>
</docy>
</html>
Ce qui précède implémente la fonction de masque de base. En cliquant pour faire apparaître le masque, un objet apparaîtra. En cliquant pour fermer, l'effet de masque disparaîtra. Voici comment réaliser l'effet:
Principe de mise en œuvre:
Créez un div plein écran, en utilisant un positionnement absolu, afin qu'il puisse être séparé du flux de documents, sans affecter d'autres éléments, et le définir à un état translucide. Bien sûr, cette transparence peut être ajustée à volonté, et créer un élément de connexion, qui utilise également le positionnement absolu et rend sa valeur d'attribut Z-Index supérieure à la div sur l'écran, et en ce moment elle ne sera pas couverte par la div à écran complet. Dans l'état par défaut, la valeur d'attribut d'affichage de ces deux divs n'est aucune. Lorsque vous cliquez sur le bouton correspondant, ils peuvent modifier leur valeur d'attribut d'affichage.
Suggestion: le code manuscrit autant que possible peut améliorer efficacement l'efficacité et la profondeur d'apprentissage.
J'espère que cet article sera utile à la programmation Web de chacun.