Cliquez sur l'effet de couche pop -up & amp;

Auteur：Eve Cole Date de mise à jour：2025-03-01 03:32:01

Copier le code du code comme suit:

<html>

<adal>

<Title> Effets spéciaux Web-Window Effets spéciaux - L'effet de l'arrière-plan Web après la fenêtre pop-up devient plus sombre </Title>

<! - Ajoutez le code suivant entre <A-thead> et </-head> ->

.Black_overlay {Affichage: Aucun; Opacité: .80; filtre: alpha (opacité = 80);}

. Débordement: auto;}

</ style>

</ head>

<body>

<! - Ajoutez le code suivant entre <body> et </body> ->

Cliquez ici pour ouvrir la fenêtre </a>

Fermer </a>

<br> Contenu des fenêtres

</div>

</docy>

</html>

Exemple 2:

Copier le code du code comme suit:

<Title> Page non-title </TITME>

Fonction Hid ()

{{

var div4 = document.getElementById ("div1");

div4.style.display = "bloc";

div4.style.width = "200px";

div4.style.head = "150px";

div4.style.zindex = "9999";

div4.style.top = "43%";

div4.style.left = "43%";

div4.style.position = "Absolute";

var div3 = document.getElementById ("div2");

div3.style.display = "bloc";

div3.style.width = "1000px";

div3.style.zindex = "9998";

div3.style.position = "absolu";

div3.style.head = document.body.offsetheight;

div3.style.top = "0px";

div3.style.left = "0px";

}

Fonction vis ()

{{

var div4 = document.getElementById ("div1");

div4.style.display = "aucun";

var div3 = document.getElementById ("div2");

div3.style.display = "Aucun";

div3.style.width = "0px";

div3.style.head = "0px";

div4.innerhtml = "<a onclick = 'vis ()' style = 'affiche: block' id = 'text'> cliquez pour fermer </a> <br /> <input name = 'textbox2' type = 'text' id = 'textbox2' /> <br /> <input id = 'Button3' type = 'Button' value = 'bouton' onclick = 'return Button3_OnClick () ";

}

</cript>

</ head>

<body>

<! - dwlayoutTable->

<tr>

<a onClick = "HID ()"> Cliquez pour afficher </a> <br />

<div style = "Couleur: blanc; fond-couleur: vert; affichage: aucun;"

<a onclick = "vis ()" style = "affiche: block" id = "text"> cliquez pour fermer </a> <br />

<br />

<asp: textbox id = "textbox2" runat = "server"> </ asp: textbox> <br />

</div>

</ form> </td>

</tr>

</ table>

</div>

</docy>

</html>

Exemple 3:

Copier le code du code comme suit:

<adal>

<Title> Cliquez sur l'effet de calque pop -up </Title>

<Style>

* {marge: 0;}

Corps {taille de police: 12px;}

#Container Div {margin-top: 5px;}

#Select_city h3 {float: gauche;}

# main_city, # all_province {clairement: les deux;}

#Main_city div, # all_province div {width: 600px;

#Main_City H4, # all_province h4 {float: Left;

#Main_city div span, # all_proving div

#Float_lay {largeur: 200px;

</ style>

// couche pop

Fonction openLayer (objid, conid) {

var arrayPageSize = getPageSize ();

var arrayPagescroll = getPagescroll ();

if (! document.getElementById ("popupAddr") {) {

// Créer une couche de contenu pop -up

var pospdiv = document.CreateElement ("div");

// Définissez les attributs et les styles sur cet élément

Popupdiv.setAttribute ("id", "popupaddr")

popupdiv.style.position = "absolu";

popupdiv.style.border = "1px solide #ccc";

popupdiv.style.background = "#fff";

popupdiv.style.zindex = 99;

// Créer une couche d'arrière-plan pop -up

var bodyback = document.CreateElement ("div");

Bodyback.setTattrait ("id", "bodybg")

bodyback.style.position = "absolu";

bodyback.style.width = "100%";

Bodyback.style.head = (arrayPageSize [1] + 35 + 'px');

bodyback.style.zindex = 98;

bodyback.style.top = 0;

bodyback.style.left = 0;

bodyback.style.filter = "alpha (opacité = 50)";

bodyback.style.opacity = 0,5;

bodyback.style.background = "#ddf";

// implémenter le POP -Up (après avoir inséré l'élément cible)

var mybody = document.getElementById (objid);

INSERT ARTH (PopupDiv, MyBody);

Insertafter (bodyback, mybody);

}

// Afficher la couche d'arrière-plan

document.getElementById ("bodybg").

// Affiche la couche de contenu

var postobj = document.getElementById ("popupAddr")

pos.innerhtml = document.getElementById (conf) .InnerHtml;

pos.style.display = "";

// Laissez la couche pop -up verticalement à gauche et à droite dans la page (unifiée)

// popobj.style.width = "600px";

// popobj.

// Laissez la couche pop -up verticalement à gauche et à droite dans la page (personnalité)

var arrayConsize = getConsize (conf)

pos.style.top = arrayPagescroll [1] + (arrayPageSize [3] -ArrayConsize [1]) / 2-50 + 'px';

pos.style.left = (arrayPageSize [0] -ArrayConsize [0]) / 2 -30 + 'px';

}

// Obtenez la taille d'origine de la couche de contenu

Fonction getConsize (conf) {

var conobj = document.getElementByid (conf)

conobj.style.position = "absolu";

conobj.style.left = -1000+ "px";

conobj.style.display = "";

Var arrayConsize = [conobj.offsetwidth, connu

conobj.

Return arrayConsize;

}

Fonction INSERTAFTER (Newslement, TargetElement) {// INSERT

var parent = targetElement.parentNode;

If (parent.lastchild == targetElement) {

Parent.ApendChild (Newslement);

}

autre {

Parent.insertBefore (Newslement, TargetElement.NextSibling);

}

// Obtenez la hauteur de la barre roulante

fonction getPagescroll () {

Var yscroll;

if (self.pageyoffset) {

yscroll = self.pageyoffset;

} Else if (document.documentEDelement && document.Documentlement.scroltop) {{{

yscroll = document.DocumentEdElement.ScrollTop;

} else if (document.body) {{

yscroll = document.body.scrolltop;

}

ArrayPagesCroll = New Array ('', yscroll)

Return ArrayPagesCroll;

}

// Obtenez la taille réelle de la page

fonction getPageSize () {

var xscroll, yscroll;

if (window.innerheight && window.scrollmaxy) {{

xscroll = document.body.scrollwidth;

yscroll = window.innerheight + window.scrollMaxy;

} Else if (document.body.scrollHeight> document.body.offsetheight) {

sscroll = document.body.scrollwidth;

yscroll = document.body.scrollHeight;

} Autre {

xscroll = document.body.offsetWidth;

yscroll = document.body.offsetheight;

}

Var Windowwidth, WindowHeight;

// var pageHeight, pagewidth;

if (self.innerheight) {

WindowWidth = self.innerwidth;

Windowheight = self.innerheight;

} Else if (document.documentEDelement && document.DocumentMelement.ClientHeight) {

windowWidth = document.DocumentElement.ClientWidth;

WindowHeight = document.DocumentElement.clitingHeight;

} else if (document.body) {{

windowWidth = document.body.clientwidth;

windowHeight = document.body.clitingHeight;

}

Var PageWidth, PageHeight

if (yscroll <windowheight) {

payheight = windowheight;

} Autre {

Payheight = yscroll;

}

if (xscroll <windowwidth) {

PageWidth = WindowWidth;

} Autre {

PageWidth = xscroll;

}

ArrayPageSize = nouveau tableau (pagewidth, pageHeight, fenêtre, fenêtre)

Return arrayPageSize;

}

// Fermez la couche pop -up

Fonction roseLayer () {

document.getElementById ("popupaD").

document.getElementById ("bodybg").

Retourne false;

}

</cript>

</ head>

<body>

<! - Le premier contenu de couche pop-up->

<div id = "tabtop-l"> <strong> Paramètres de style </strong> </div>

<div id = "tabtop-r" onclick = "roseLayer ()"> <strong> clôture </strong> </div>

</div>

<div id = "tabContent"> afficher le contenu ici </div>

</div>

<br>

<! - Le deuxième contenu de couche pop-up->

<div id = "tabtop-l2"> <Strong style = "Color: Block"> Définir les invites </strong> </div>

<div id = "tabtop-r2" onclick = "roseLayer ()"> <Strong style = "colore: red"> close </strong> </div>

</div>

<p> Afficher le contenu rapide ici "

<p> Conseils 1

<p> Rappel 2

</div>

<br>

1 <br>

<br>

<! - Le troisième contenu de couche pop-up->

<div id = "tabtop-l3"> <Strong Style = "Color: Red; Font-Size: 20px"> Style Demonstration </strong> </div>

<div id = "tabtop-r3" onclick = "closeLayer ()"> <strong> clôture </strong> </div>

</div>

<div id = "tabContent3"> Le contenu de l'affichage ici </div>

</div>

</docy>

</html>