Analyse du principe de l'effet de calque de masque en utilisant des compétences pures js_javascript

On peut dire que cette fonction, après avoir compris le "Snake" précédent, est vraiment très différente de la difficulté que j'avais imaginée au départ. Bien sûr, cette méthode est un peu délicate, mais elle a finalement atteint la fonction. . Organisation

1. Principe de mise en œuvre

Le principe de mise en œuvre de cet article est le suivant :

* En fait, la couche pop-up, calque de masque et page d'origine L'affichage est divisé en trois divs différents

* Le niveau du calque contextuel est au-dessus du calque de masque et le niveau du calque de masque est au-dessus de l'affichage de la page d'origine
* Le calque de masque a un effet de transparence

* Le calque de masque n'a aucune signification pratique, il n'est donc pas nécessaire de l'écrire dans la partie html. Bien sûr, cela peut aussi être réalisé par écriture.


2. Implémentation du code
Le langage html est le suivant :

Copier le codeLe code est le suivant :

....

< div id="alert" style="display:none;">

Connexion

< ;input type="mot de passe">

🎜>






Javascript implémente un calque contextuel et un calque de masque :




Copier le code

Le code est le suivant :

function show(){ var alertPart=document.getElementById("alert"); alertPart.style. display="block"; alertPart.style.position = "absolute"; alertPart.style.top = "50%";

alertPart.style.left = "50%"

alertPart.style.marginTop = "-75px"; = "-150px";
alertPart.style.background="cyan";
alertPart.style.width="300px" ;
alertPart.style.height="200px"; style.zIndex = "501";

var monbg = document.createElement("div");
monbg. setAttribute("id","monbg"); = "#000";
monbg.style.width = "100%";
monbg.style.height = "100 %"
monbg.style.position = "absolu"; monbg.style.top = "0";
monbg.style.left = "0";
monbg.style.zIndex = "500";
monbg.style.opacity = "0,3"; 🎜>mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);

document.body.style.overflow = "hidden"
}



Z-index est utilisé ici pour distinguer les niveaux, l'opacité et le filtre : transparence alpha (opacity=), document.createElement("div ") et document.body.appendChild() sont tous apparus et appliqués auparavant, nous pouvons donc y parvenir. En fait, lorsque vous comprendrez le principe, tout deviendra beaucoup plus facile.

La route est longue et longue.