[เบราว์เซอร์ที่เข้าร่วมการทดสอบ: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[ระบบปฏิบัติการ: วินโดวส์]
บทช่วยสอนนี้มีจุดมุ่งหมายเพื่อแยกสไตล์และการทำงานของ lightBox และลดการทำงานของ JS ในด้านต่างๆ (การมาสก์แบบเต็มหน้าจอ การเลือกการมาสก์ใน ie6 การจัดกึ่งกลางสองทาง เนื้อหาที่ปรับความสูงได้ ฯลฯ)
ก่อนอื่นให้ใส่รหัส :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="หน้าแรก" />
<title>ระบบป้องกันแบบเต็มหน้าจอ, ไลท์บ็อกซ์จัดกึ่งกลางอัตโนมัติ</title>
<style type="text/css">
* { ระยะขอบ:0;
html,body { ความสูง:100%; ล้น:ซ่อน; แบบอักษร:12px/1.5 simsun;}
.myPage { ความสูงบรรทัด: 3; ล้น: อัตโนมัติ; ความกว้าง: 100%;
.ไลท์บ็อกซ์,
.popupCover,
.popupIframe,
.popupComponent { ตำแหน่ง: สัมบูรณ์; 0; ด้านบน: 0; ความกว้าง: 100%;
.popupComponent { ดัชนี z:2; จอแสดงผล:ไม่มี;}
.popupIframe { จอแสดงผล: ไม่มี; _display: บล็อก; _filter: alpha (ความทึบ = 0);}
.popupCover { พื้นหลัง:#000; ความทึบ:0.7; *ตัวกรอง:อัลฟา(ความทึบ=70);}
.lightBox { การจัดตำแหน่งข้อความ: กลาง; ล้น: อัตโนมัติ;}
.lightBoxContent { จอแสดงผล:อินไลน์; *display:inline; ซูม:1; ความกว้าง:10px; พื้นหลัง:#fff;
.lightBoxMaxHeight { จอแสดงผล: อินไลน์บล็อก; แนวตั้ง: กลาง; ความสูง: 100%;
.lightBoxWrapper { จอแสดงผล: อินไลน์บล็อก; * จอแสดงผล: อินไลน์; ซูม: 1;
.lightBoxClose { สี:#f00;}
.lightBoxSubmit { ขอบด้านบน:10px; padding-top:5px;
.lightBoxSubmit อินพุต { ขนาดตัวอักษร: 12px; การขยาย: 0 10px; ล้น: มองเห็นได้;
</สไตล์>
</หัว>
<ร่างกาย>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
ข้อความจะอยู่ตรงกลางเมื่อข้อความแจ้งมีขนาดเล็กกว่าหนึ่งบรรทัด<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
เมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหนึ่งหน้าจอ<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="myPage">
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
<div style="text-align:center;"><input type="button" value="ปุ่มบนหน้าจอแรก" onclick="showLayer('lightBox')" /></div>
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
<select><option>ตัวเลือกที่ใช้ทดสอบว่าสามารถครอบคลุมใน IE6 ได้หรือไม่</option></select><br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
<select><option>อีกตัวเลือกหนึ่งสำหรับการทดสอบว่าจะครอบคลุมใน IE6 หรือไม่</option></select><br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
<div style="text-align:center;"><input type="button" value="ปุ่มที่อยู่ในหน้าจอที่สอง" onclick="showLayer('lightBox')" /><input type="button" ค่า ="เมื่อเนื้อหาเกินความสูงของหน้าจอเดียว" onclick="showLayer('lightBox2')" /></div>
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
</div>
<สคริปต์>
ฟังก์ชั่น showLayer (id) {
document.getElementById(id).style.display = "บล็อก";
-
ฟังก์ชั่น HideLayer(id) {
document.getElementById(id).style.display = "ไม่มี";
-
</สคริปต์>
</ร่างกาย>
</html>
ไลท์บ็อกซ์นี้มีคุณสมบัติดังต่อไปนี้ คุณสามารถทดสอบได้โดยการแก้ไขโค้ด ^-^:
หากคุณสนใจ เคล็ดลับต่อไปนี้ที่ประกอบเป็นไลท์บ็อกซ์นี้มีไว้เพื่อใช้อ้างอิง:
1. วิธีการปิดบังแบบเต็มหน้าจอ:
A. ซ่อนแถบเลื่อนของ html/body
B. ใช้ div เป็นตัวมาสก์ จากนั้นใช้ div อื่นเพื่อสร้างเพจที่มีแถบเลื่อน แถบหนึ่งอยู่ด้านบนและอีกอันอยู่ด้านล่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Chomo" />
<link rel="start" href=" http://www.14px.com " title="หน้าแรก" />
<title>วิธีการมาสก์แบบเต็มหน้าจอ</title>
<style type="text/css">
-
Margin:0; padding:0; /*--- รีเซ็ต css อย่างง่าย ว่ากันว่ามันไม่มีประสิทธิภาพ โปรดแทนที่ด้วยอันที่มีประสิทธิภาพ ---*/
-
html,เนื้อหา {
height:100%; /*--- ด้วยความสูงนี้ ภายใต้ IE6 จะมีประสิทธิภาพในการตั้งค่า height:100% สำหรับวัตถุย่อยของร่างกาย---*/
overflow:hidden; /*--- ปิดแถบเลื่อนที่สร้างโดย html หรือ body---*/
-
.หน้าหนังสือ {
ความสูงของเส้น:3;
ล้น:อัตโนมัติ; /*--- แถบเลื่อนขึ้นอยู่กับมัน---*/
width:600px; height:400px; พื้นหลัง:#f60; /*--- มาทำให้ใหญ่ขนาดนี้เพื่อให้ทุกคนมองเห็นได้ชัดเจน---*/
position:relative; left:50px; top:50px; /*--- ขยับเล็กน้อยเพื่อให้ทุกคนมองเห็นได้ชัดเจน ลบออก และได้เอฟเฟกต์พื้นฐานของมาสก์---*/
-
.ปิดบัง {
ตำแหน่ง:แน่นอน;
ความกว้าง:600px; ความสูง:400px;
ความทึบ:0.7; *ตัวกรอง:อัลฟา(ความทึบ=70);
ดัชนี z:2;
-
</สไตล์>
</หัว>
<ร่างกาย>
<div class="cover"></div>
<div class="หน้า">
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />แกล้งทำเป็นรวยในเนื้อหา<br />
</div>
</ร่างกาย>
</html>