Klicken Sie auf den Pop -UP -Schicht -Effekt & amp;

Autor：Eve Cole Aktualisierungszeit：2025-03-01 03:32:01

Kopieren Sie den Code -Code wie folgt:

<html>

<kopf>

<title> Web Special Effects-Window-Spezialeffekte-Der Effekt des Webhintergrunds nach dem Popup-Fenster wird dunkler </title>

<!-Fügen Sie den folgenden Code zwischen <kopf> und </head>-> hinzu

.Black_overlay {Anzeige: Absolut: 0%; Opazität: .80 Filter: Alpha (Opazität = 80);}

. Überlauf: Auto;}

</style>

</head>

<body>

<!-Fügen Sie den folgenden Code zwischen <body> und </body>-> hinzu

Klicken Sie hier, um das Fenster zu öffnen </a>

Schließen </a>

<br> Fensterinhalt

</div>

</body>

</html>

Beispiel 2:

Kopieren Sie den Code -Code wie folgt:

<title> Nicht -Title -Seite </title>

Funktion HID ()

{{{{

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

Div4.Style.display = "Block";

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 = "Block";

div3.style.width = "1000px";

div3.style.zindex = "9998";

Div3.Style.position = "Absolute";

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

div3.Style.top = "0px";

div3.style.left = "0px";

}

Funktion vis ()

{{{{

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

div4.Style.display = "Keine";

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

div3.style.display = "keine";

div3.style.width = "0px";

Div3.Style.head = "0px";

Div4.InnerHtml = "<a onclick = 'vis)' style = 'display: block' id = 'text'> klicken, um zu schließen </a> <br /> <input name = 'textBox2' type = 'text' id = 'textBox2' /> <br /> <input id = 'button3' type = 'button' value = 'button' onclick = 'return tast3_onclick () ";

}

</script>

</head>

<body>

<!-dwlayoutTable->

<tr>

<a onclick = "hid ()"> klicken, um </a> <br /> anzuzeigen.

<div style = "Farbe: weiß; Hintergrundfarbe: grün; Anzeige: Keine;

<a onclick = "vis ()" style = "display: block" id = "text"> klicken, um zu schließen </a> <br />

<br />

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

</div>

</form> </td>

</tr>

</table>

</div>

</body>

</html>

Beispiel 3:

Kopieren Sie den Code -Code wie folgt:

<kopf>

<titels> Klicken Sie auf den Pop -up -Schicht -Effekt </title>

* {Margin: 0;}

Körper {Schriftgröße: 12px;}

#Container div {Margin-Top: 5px;}

#Selekt_city h3 {float: links;}

#Main_City,#All_province {Clear: Beide;}

#Main_City Div,#All_Province Div {Breite: 600px;

#Main_City H4,#All_province H4 {float: links;

#Main_city div span,#all_provring div

#Float_lay {Breite: 200px;

</style>

// Pop -Schicht

Funktion openLayer (objid, conid) {

var ArrayPageSize = getPageSize ();

var ArrayPagesCroll = getPagesCroll ();

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

// Erstellen Sie eine POP -up -Inhaltsebene

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

// Setzen Sie die Attribute und Stile auf dieses Element

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

popupdiv.style.position = "absolut";

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

popupdiv.style.background = "#fff";

popupdiv.style.zindex = 99;

// Erstellen Sie eine POP -up -Hintergrundschicht

var byback = document.createelement ("div");

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

bodyback.style.position = "absolut";

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 (opacity = 50)";

bodyback.style.opacity = 0,5;

bodyback.style.background = "#ddf";

// Implementieren Sie das Pop -up (nach Einfügen des Zielelements)

var mybody = document.getElementById (objid);

Insertable (Popupdiv, myBody);

InsertAfter (Bodyback, MyBody);

}

// Zeigen Sie die Hintergrundebene an

document.getElementById ("bodybg").

// Zeigen Sie die Inhaltsebene an

var postobj = document.getElementById ("popupaddr")

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

pos.style.display = "";

// Lassen Sie die Pop -up -Ebene vertikal links und rechts in der Seite (einheitlich).

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

// popobj.

// Lassen Sie die Pop -up -Schicht vertikal links und rechts in der Seite (Persönlichkeit)

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';

}

// Erhalten Sie die ursprüngliche Größe der Inhaltsschicht

Funktion getConsize (conf) {

var conobj = document.getElementById (conf)

conobj.style.position = "absolut";

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

conobj.style.display = "";

Var arrayConsize = [conobj.offsetwidth, connable

conobj.

Return arrayConsize;

}

Funktion InsertAfter (Nachrichten, ZielElement) {// einfügen

var parent = targetElement.parentnode;

If (parent.lastchild == targetElement) {

Parent.AppendChild (Nachrichtenerklärung);

}

anders {

Parent.insertBefore (Nachrichten, targetElement.nextsibling);

}

// Holen Sie sich die Höhe der Rollstange

Funktion getPagesCroll () {

Var yscroll;

if (self.pageyOffset) {

yScroll = self.pageyOffset;

} Else if (document.documentedElement && document.documentlement.scroltop) {{{{{{{{{{{{{{{{{{{{{{{{{

yScroll = document.documentedlement.scrolltop;

} else if (document.body) {{{

yScroll = document.body.scrolltop;

}

ArrayPagesCroll = New Array ('', yScroll)

Return ArrayPagesCroll;

}

// Erhalten Sie die tatsächliche Größe der Seite

Funktion 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.offseteight) {

sscroll = document.body.scrollwidth;

yScroll = document.body.scrollHeight;

} Anders {

xscroll = document.body.Offsetwidth;

yScroll = document.body.offseteight;

}

var windowwidth, windowheight;

// var PageHeight, Pagewidth;

if (self.innerHeight) {

Windowwidth = self.innnerwidth;

WindowHeight = self.innerHeight;

} Else if (document.documentedElement && document.documentlement.clientHeight) {

windowwidth = document.documentElement.clientwidth;

WindowHeight = document.documentElement.clitingHeight;

} else if (document.body) {{{

windowwidth = document.body.clientwidth;

windowHeight = document.body.clitingHeigh;

}

Var pagewidth, pageheight

if (yScroll <windowHeight) {

payheight = windowheight;

} Anders {

payheight = yScroll;

}

if (xscroll <windowwidth) {

pagewidth = windowwidth;

} Anders {

pagewidth = xscroll;

}

ArrayPageSize = New Array (Pagewidth, PageHeight, Fensterbreite, Fensterheight)

ArrayPageSize return;

}

// Schließen Sie die Pop -up -Ebene

Funktion closelayer () {

document.getElementById ("popupaddr").

document.getElementById ("bodybg").

False zurückgeben;

}

</script>

</head>

<body>

<!-der erste Inhalt der Popup-Ebene->

<div id = "tabtop-l"> <strong> Stileinstellungen </strong> </div>

<div id = "tabtop-r" onclick = "closelayer ()"> <strong> close </strong> </div>

</div>

<div id = "tabcontent"> Inhalt hier anzeigen </div>

</div>

<br>

<!-der zweite Inhalt der Popup-Ebene->

<div id = "tabtop-l2"> <strong style = "color: block"> Einstellungen einstellen </strong> </div>

<div id = "tabtop-r2" onclick = "closelayer ()"> <strong style = "color: rot"> close </strong> </div>

</div>

<p> hier den schnellen Inhalt anzeigen "

<p> Tipps 1

<p> Erinnerung 2

</div>

<br>

1 <br>

<br>

<!-der dritte Inhalt der Popup-Schicht->

<div id = "tabtop-l3"> <strong style = "color: rot; Schriftgröße: 20px"> Style Demonstration </strong> </div>

<div id = "tabtop-r3" onclick = "closelayer ()"> <strong> close </strong> </div>

</div>

<div id = "tabcontent3"> Der Inhalt der Anzeige hier </div>

</div>

</body>

</html>