คัดลอกรหัสรหัสดังนี้:
<html>
<head>
<title> เอฟเฟกต์เอฟเฟกต์พิเศษเว็บพิเศษ-เอฟเฟกต์ของพื้นหลังเว็บหลังจากหน้าต่างป๊อปอัพกลายเป็นสีเข้ม </title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">>
<!-เพิ่มรหัสต่อไปนี้ไปที่ระหว่าง <head> และ </head>->
<style type = "text/css">
. BLACK_OVERLAY {จอแสดงผล: ไม่มี; ความทึบ: .80;
. white_content {แสดงผล: ไม่มี ล้น: auto;}
</style>
</head>
<body>
<!-เพิ่มรหัสต่อไปนี้ลงระหว่าง <body> และ </body>->
<a href = "JavaScript: void (0)" onclick = "document.getElementById ('light'). style.display = 'block'; .style.display = 'block'">
คลิกที่นี่เพื่อเปิดหน้าต่าง </a>
<div id = "Light">
<a href = "javascript: void (0)" onclick = "document.getElementById ('light'). style.display = 'none'; tyle.display = 'none'">
ปิด </a>
<br> เนื้อหาหน้าต่าง
</div>
<div id = "fade"> 123 </div>
</body>
</html>
ตัวอย่างที่ 2:
คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "เซิร์ฟเวอร์">
<tite> หน้าไม่ใช่ -title </title>
<script language = "javascript" type = "text/javascript">
ฟังก์ชั่น 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 = "สัมบูรณ์";
var div3 = document.getElementById ("div2");
div3.style.display = "block";
div3.style.width = "1000px";
div3.style.zindex = "9998";
div3.style.position = "สัมบูรณ์";
div3.style.head = document.body.offsetheight;
div3.style.top = "0px";
div3.style.left = "0px";
-
ฟังก์ชั่น vis ()
-
var div4 = document.getElementById ("div1");
div4.style.display = "ไม่มี";
var div3 = document.getElementById ("div2");
div3.style.display = "ไม่มี";
div3.style.width = "0px";
div3.style.head = "0px";
div4.innerhtml = "<a onclick = 'vis ()' style = 'display: block' id = 'text'> คลิกเพื่อปิด </a> <br /> <input name = 'textbox2' type = 'text' id = 'textbox2' /> <br /> <อินพุต id = 'button3' type = 'ปุ่ม' value = 'ปุ่ม' onclick = 'กลับ button3_onclick () ";
-
</script>
</head>
<body>
<div align = "center">
<table cellpadding = "0" cellspacing = "0">
<!-dwlayouttable->
<tr>
<td> <form id = "form1" runat = "เซิร์ฟเวอร์">
<a onclick = "hid ()"> คลิกเพื่อแสดง </a> <br />
<div style = "color: สีขาว; พื้นหลังสี: สีเขียว;
<a onclick = "vis ()" style = "display: block" id = "text"> คลิกเพื่อปิด </a> <br />
<br />
<asp: textbox id = "textbox2" runat = "เซิร์ฟเวอร์"> < /asp: textbox> <br />
<input id = "button3" type = "button" value = "ปุ่ม" onclick = "return button3_onclick ()" /> </div>
<div style = "ตัวกรอง: alpha (ความทึบ = 70); ความกว้าง: 1px; ความสูง: 8px; พื้นหลัง-สี: #cccccc; ซ้าย: 0px; ใส่: top: 0px; z-index: 9998; id = "div2">
</div>
</form> </td>
</tr>
</table>
</div>
</body>
</html>
ตัวอย่างที่ 3:
คัดลอกรหัสรหัสดังนี้:
<!
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = gb2312" /> />
<title> คลิกเอฟเฟกต์เลเยอร์ป๊อปอัพ </title>
<style>
* {margin: 0;}
ร่างกาย {ตัวอักษรขนาด: 12px;}
#Container div {margin-top: 5px;}
#SELECT_CITY H3 {float: ซ้าย;}
#main_city,#all_province {clear: ทั้งสอง;}
#main_city div,#all_province div {width: 600px;
#main_city h4,#all_province h4 {float: ซ้าย;
#main_city div span,#all_provring div
#float_lay {ความกว้าง: 200px;
</style>
<script type = "text/javascript">
// ชั้นป๊อป
ฟังก์ชั่น OpenLayer (objid, conid) {
var arraypagesize = getPagesize (); // เรียกฟังก์ชัน getPagesize ()
var arraypagescroll = getPagesCroll ();
if (! document.getElementById ("popupaddr") {) {
// สร้างเลเยอร์เนื้อหาป๊อปอัพ
var pospdiv = document.createelement ("div");
// ตั้งค่าแอตทริบิวต์และสไตล์เป็นองค์ประกอบนี้
popupdiv.setAttribute ("id", "popupaddr")
popupdiv.style.position = "สัมบูรณ์";
popupdiv.style.border = "1px solid #ccc";
popupdiv.style.background = "#fff";
popupdiv.style.zindex = 99;
// สร้างเลเยอร์พื้นหลังป๊อปอัพ
var bodyback = document.createelement ("div");
bodyback.settattribute ("id", "bodybg")
bodyback.style.position = "สัมบูรณ์";
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 (ความทึบ = 50)";
bodyback.style.Opacity = 0.5;
bodyback.style.background = "#ddf";
// ใช้ POP -UP (หลังจากแทรกองค์ประกอบเป้าหมาย)
var mybody = document.getElementById (objid);
insertaft (popupdiv, mybody);
insertfter (bodyback, mybody);
-
// แสดงเลเยอร์พื้นหลัง
Document.getElementById ("BodyBg")
// แสดงเลเยอร์เนื้อหา
var postobj = document.getElementById ("popupaddr")
pos.innerhtml = document.getElementById (conf) .innerhtml;
pos.style.display = "";
// ปล่อยให้เลเยอร์ป๊อปอัพซ้ายและขวาในแนวตั้งในหน้า (Unified)
// popobj.style.width = "600px";
// popobj
// popobj
// popobj
// ให้เลเยอร์ป๊อปอัพซ้ายและขวาในหน้าในหน้า (บุคลิกภาพ)
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';
-
// รับขนาดดั้งเดิมของเลเยอร์เนื้อหา
ฟังก์ชั่น getConsize (conf) {
var conobj = document.getElementById (conf)
conobj.style.position = "สัมบูรณ์";
conobj.style.left = -1000+ "px";
conobj.style.display = "";
var arrayConsize = [conobj.offsetWidth, เชื่อมต่อได้
Conobj
return arrayconsize;
-
ฟังก์ชั่น insertfter (ข่าว, targetElement) {// แทรก
var parent = targetElement.parentNode;
if (parent.lastChild == TargetElement) {
Parent.AppendChild (ข่าว);
-
อื่น {
parent.insertbefore (ข่าว, targetElement.nextsibling);
-
-
// รับความสูงของแถบกลิ้ง
ฟังก์ชั่น getPagesCroll () {
var yscroll;
if (self.pageyoffset) {
yscroll = self.pageyoffset;
} อื่นถ้า (document.documentElement && document.documentlement.scroltop) {{{
yscroll = document.documentedlement.scrolltop;
} else if (document.body) {{
yscroll = document.body.scrolltop;
-
arrayPagesCroll = array ใหม่ ('', yscroll)
return arraypagescroll;
-
// รับขนาดจริงของหน้า
ฟังก์ชั่น getPagesize () {
var xscroll, yscroll;
if (window.innerHeight && window.scrollMaxy) {{
xscroll = document.body.scrollwidth;
yscroll = window.innerHeight + window.scrollmaxy;
} อื่นถ้า (document.body.scrollheight> document.body.offsetheight) {
sscroll = document.body.scrollwidth;
yscroll = document.body.scrollheight;
} อื่น {
xscroll = document.body.offsetWidth;
yscroll = document.body.offsetheight;
-
var windowwidth, windowheight;
// var pageHeight, pagewidth;
ถ้า (self.innerHeight) {
windowwidth = self.innerWidth;
WindowHeight = self.innerHeight;
} อื่นถ้า (document.documentElement && document.documentlement.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;
} อื่น {
payheight = yscroll;
-
if (xscroll <windowwidth) {
pagewidth = windowwidth;
} อื่น {
pagewidth = xscroll;
-
arrayPagesize = อาร์เรย์ใหม่ (pagewidth, pageheight, windowwidth, windowheight)
return arraypagesize;
-
// ปิดเลเยอร์ป๊อปอัพ
ฟังก์ชั่น closelayer () {
document.getElementById ("popupaddr")
document.getElementById ("BodyBg")
กลับเท็จ;
-
</script>
</head>
<body>
<input name = "input" id = "test" value = "การตั้งค่าสไตล์" type = "ปุ่ม" onclick = "openLayer ('ทดสอบ', 'test_con')" />>
<!-เนื้อหาเลเยอร์ป๊อปอัพตัวแรก->
<div id = "test_con" style = "display: none">
<div id = "tab">
<div id = "tabtop">
<div id = "tabtop-l"> <strong> การตั้งค่าสไตล์ </strong> </div>
<div id = "tabtop-r" onclick = "closelayer ()"> <strong> ปิด </strong> </div>
</div>
<div id = "tabcontent"> แสดงเนื้อหาที่นี่ </div>
</div>
</div>
<br>
<br>
<br>
<input name = "input" id = "test2" value = "style prompt" type = "ปุ่ม" onclick = "openLayer ('test2', 'test_con2')" />
<!-เนื้อหาเลเยอร์ป๊อปอัพที่สอง->
<div id = "test_con2" style = "จอแสดงผล: ไม่มี">
<div id = "tab2">
<div id = "tabtop2">
<div id = "tabtop-l2"> <strong style = "color: block"> set prompts </strong> </div>
<div id = "tabtop-r2" onclick = "closelayer ()"> <strong style = "color: red"> close </strong> </div>
</div>
<div id = "tabconent2" style = "สี: #dff; พื้นหลัง: #000">
<p> แสดงเนื้อหาพรอมต์ที่นี่ "
<p> เคล็ดลับ 1
<p> เตือนความจำ 2
</div>
</div>
</div>
<br>
1 <br>
<br>
<อินพุตชื่อ = "อินพุต" id = "test3" value = "การสาธิตสไตล์" type = "ปุ่ม" onclick = "openLayer ('test3', 'test_con3')" />
<!-เนื้อหาเลเยอร์ป๊อปอัพที่สาม->
<div id = "test_con3" style = "display: none">
<div id = "tab3">
<div id = "tabtop3">
<div id = "tabtop-l3"> <strong style = "color: red; font-size: 20px"> การสาธิตสไตล์ </strong> </div>
<div id = "tabtop-r3" onclick = "closelayer ()"> <strong> ปิด </strong> </div>
</div>
<div id = "tabcontent3"> เนื้อหาของการแสดงผลที่นี่ </div>
</div>
</div>
</body>
</html>