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>
<meta http-äquiv = "content-type" content = "text/html; charset = gb2312">
<!-Fügen Sie den folgenden Code zwischen <kopf> und </head>-> hinzu
<Style type = "text/css">
.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
<A href = "javaScript: void (0)" onclick = "document.getElementById ('light'). Style.display = 'block'; .style.display = 'block'">
Klicken Sie hier, um das Fenster zu öffnen </a>
<div id = "light">
<A href = "javaScript: void (0)" onclick = "document.getElementById ('light'). Style.display = 'none'; tyle.display = 'none'">
Schließen </a>
<br> Fensterinhalt
</div>
<div id = "fade"> 123 </div>
</body>
</html>
Beispiel 2:
Kopieren Sie den Code -Code wie folgt:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<title> Nicht -Title -Seite </title>
<script Language = "javaScript" Typ = "text/javaScript">
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>
<Div Align = "Center">
<Table CellPadding = "0" Cellspacing = "0">
<!-dwlayoutTable->
<tr>
<td> <form ID = "Form1" Runat = "Server">
<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 />
<input id = "button3" type = "button" value = "button" onclick = "return button3_onclick ()" /> < /div>
<div style = "filter: alpha (opacity = 70); width: 1px; Höhe: 8px; Hintergrundfarbe: #cccccc; links: 0px; Id = "div2">
</div>
</form> </td>
</tr>
</table>
</div>
</body>
</html>
Beispiel 3:
Kopieren Sie den Code -Code wie folgt:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = gb2312" /> />
<titels> Klicken Sie auf den Pop -up -Schicht -Effekt </title>
<Styles>
* {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>
<script type = "text/javaScript">
// 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.
// popobj.
// 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>
<input name = "input" id = "test" value = "style Einstellungen" Typ = "Taste" onclick = "openLayer ('test', 'test_con')" />
<!-der erste Inhalt der Popup-Ebene->
<div id = "test_con" style = "Anzeige: Keine">
<div id = "tab">
<div id = "tabtop">
<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>
</div>
<br>
<br>
<br>
<input name = "input" id = "test2" value = "stylect" type = "button" onclick = "openLayer ('test2', 'test_con2')" />
<!-der zweite Inhalt der Popup-Ebene->
<div id = "test_con2" style = "Anzeige: Keine">
<div id = "tab2">
<div id = "tabtop2">
<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>
<div id = "tabconent2" style = "color: #dff; Hintergrund: #000">
<p> hier den schnellen Inhalt anzeigen "
<p> Tipps 1
<p> Erinnerung 2
</div>
</div>
</div>
<br>
1 <br>
<br>
<input name = "input" id = "test3" value = "style Demonstration" type = "button" onclick = "openLayer ('test3', 'test_con3')" />
<!-der dritte Inhalt der Popup-Schicht->
<div id = "test_con3" style = "Anzeige: Keine">
<div id = "tab3">
<div id = "tabtop3">
<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>
</div>
</body>
</html>