On peut dire qu'après avoir compris le "serpent" précédent, cette fonction est vraiment beaucoup moins difficile que je ne l'imaginais au début. Bien sûr, cette méthode est soupçonnée d'être délicate, et c'est finalement que la fonction a été mise en œuvre. Analysons et organisons-le.
1. Principe de mise en œuvre
Le principe de mise en œuvre de cet article est le suivant:
* En fait, la couche pop-up, la couche de masque et l'affichage de la page d'origine sont respectivement trois div différents
* Le niveau de la couche pop-up est au-dessus de la couche de masque, et le niveau de la couche de masque est au-dessus de l'affichage de la page d'origine;
* La couche de masque a un effet clair
* La couche de masque n'a pas de sens pratique, il n'a donc pas besoin d'être écrit sur la partie HTML. Bien sûr, il peut également être réalisé après l'écriture.
2. Implémentation du code
La langue HTML est la suivante:
La copie de code est la suivante:
<html>
....
<body>
<Nenter>
<div> <input type = "Button" value = "go" onclick = "show ()"> </div>
<div id = "alert" style = "affichage: aucun;">
<formulaire
Se connecter
<input type = "text"> <input type = "mot de passe"> <input type = "soumi" value = "login">
</ form>
</div>
</ Center>
</docy>
</html>
JavaScript implémente la couche pop-up et la couche de masque:
La copie de code est la suivante:
<span style = "font-size: 12px;"> function show () {
var alertpart = document.getElementById ("alert");
alertpart.style.display = "bloc";
alertpart.style.position = "absolu";
alertpart.style.top = "50%";
alertpart.style.left = "50%";
alertpart.style.margintop = "-75px";
alertpart.style.marginleft = "-150px";
alertpart.style.background = "cyan";
alertpart.style.width = "300px";
alertpart.style.height = "200px";
alertpart.style.zindex = "501";
var mybg = document.CreateElement ("div");
mybg.setAttribute ("id", "mybg");
mybg.style.background = "# 000";
mybg.style.width = "100%";
mybg.style.height = "100%";
mybg.style.position = "absolu";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zindex = "500";
mybg.style.opacity = "0,3";
mybg.style.filter = "alpha (opacité = 30)";
Document.Body.ApendChild (MYBG);
document.body.style.overflow = "Hidden";
}
</cript> </span>
Ici, nous utilisons Z-Index pour distinguer les hiérarchies, l'opacité et le filtre: alpha (opacité =) transparence, document.CreateElement ("div") et document.body.appendChild (), tous sont utilisés avant, afin que nous puissions les atteindre. En fait, lorsque le principe est compris, tout sera beaucoup plus facile.
La route est longue et ardue