เอฟเฟกต์: เมื่อผู้ใช้ที่ใช้ระบบ Windows ปิดตัวอินเตอร์เฟสที่ปรากฏขึ้นอนุญาตให้ผู้ใช้เลือกการปิดระบบออกจากระบบหรือยกเลิกการกระทำในขณะที่โปรแกรมบนเดสก์ท็อปไม่สามารถใช้งานได้และหน้าจอจะเป็นสีเทา เอฟเฟกต์การปิดระบบของ Windows แสดงในรูปที่ 22.1
ประโยชน์ของการใช้เอฟเฟกต์นี้บนหน้าเว็บ: ประโยชน์ของการใช้เอฟเฟกต์การปิดระบบนี้มีประโยชน์อย่างไรในหน้าเว็บ? ก่อนอื่นหลังจากคลิกลิงก์การกระทำที่ไม่สามารถใช้ได้กับผู้ใช้ในเวลานี้จะถูกซ่อนอยู่ในพื้นหลังและการดำเนินการที่มีอยู่จะถูกวางไว้ที่ด้านบนของหน้าจอและไฮไลต์ซึ่งสามารถหลีกเลี่ยงการเกิดความผิดพลาดของผู้ใช้ ประการที่สองการเน้นข้อมูลยังสามารถเตือนผู้ใช้ถึงสิ่งที่ควรให้ความสนใจ
หลักการ: หลักการของการบรรลุเอฟเฟกต์นี้ในหน้าเว็บนั้นง่ายมาก สร้างสองเลเยอร์หนึ่งเป็นเลเยอร์แรเงาครอบคลุมทั้งหน้าและแสดงด้วยสีเทา ชั้นอื่นทำหน้าที่เป็นส่วนที่ไฮไลต์เหนือเลเยอร์แรเงาซึ่งสามารถตั้งค่าได้โดยการตั้งค่าคุณสมบัติ z-index ของเลเยอร์ เมื่อเอฟเฟกต์การปิดตัวถูกยกเลิกเพียงแค่ลบองค์ประกอบสองชั้นนี้ในหน้า
รหัส:
<html>
<head>
<title> เอฟเฟกต์การปิดระบบ AJAX </title>
<styleType = text/css>
#lightbox {/*เลเยอร์นี้เป็นเลเยอร์ไฮไลต์*/
ชายแดนขวา:#ffff1pxsolid;
ชายแดนด้านบน:#ffff1pxsolid;
แสดง: บล็อก;
z-index: 9999;/*ตั้งเลเยอร์นี้ที่ด้านบนของหน้าเว็บตั้งให้ใหญ่พอ*/
พื้นหลัง:#fdfce9;/*ตั้งค่าสีพื้นหลัง*/
ซ้าย: 50%;
มาร์จิ้น: -220PX0PX0PX-250PX;
ชายแดนซ้าย:#ffff1pxsolid;
ความกว้าง: 500px;
ขอบด้านล่าง:#ffff1pxsolid;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 50%;
ความสูง: 400px;
TEXT-ALIGING: ซ้าย
-
#Overlay {/*เลเยอร์นี้เป็นเลเยอร์ปก*/
แสดง: บล็อก;
z-index: 9998;/*ตั้งค่าด้านล่างของเลเยอร์ไฮไลต์*/
ตัวกรอง: alpha (opacity = 20);/*ตั้งค่าเป็นโปร่งใส*/
ซ้าย: 0px;
ความกว้าง: 100%;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0px;
ความสูง: 100%;
พื้นหลังสี:#000;
Moz-Procity: 0.8;
ความทึบ: .80
-
</style>
</head>
<body>
<ahref = http: //www.baidu.comtarget=_blank> baidu </a>
<!-เลเยอร์นี้เป็นเลเยอร์ปก->
<divid = ซ้อนทับ> </div>
<!-เลเยอร์นี้เป็นเลเยอร์ไฮไลต์->
<divid = lightbox> <ahref =#onclick = javaScript: f ()> ปิด </a> & nbsp; <ahref =#onclick = javascript: f1 ()> เปิด </a> </div>
</body>
</html>
<script>
functionf ()
-
document.getElementById (ซ้อนทับ) .style.display = ไม่มี;
-
functionf1 ()
-
document.getElementById (ซ้อนทับ) .style.display = บล็อก;
-
</script>
หมายเหตุ: หากมีแท็ก <elect> ในเบราว์เซอร์ IE แท็กไม่สามารถเขียนทับได้โดยเลเยอร์ที่เขียนทับ แต่สามารถเขียนทับในเบราว์เซอร์อื่นได้ รูปที่ 22.3 แสดงเอฟเฟกต์ของแท็ก <elect> ในเบราว์เซอร์ IE และรูปที่ 22.4 แสดงเอฟเฟกต์ของแท็ก <elect> ใน Mozzilafirefox
รูปที่ 22.3 <Select> แท็กในเบราว์เซอร์ IE
รูปที่ 22.4 แท็ก <elect> ในเบราว์เซอร์ Mozzilafirefox
ดังนั้นเมื่อใช้เบราว์เซอร์ IE คุณต้องซ่อนองค์ประกอบ <elect> ในหน้าเว็บก่อน ตัวอย่างเช่นรหัสต่อไปนี้สามารถใช้เพื่อซ่อนองค์ประกอบทั้งหมด <elect> ของหน้า
selects = document.getElementsByTagname ('เลือก');
สำหรับ (i = 0; i <selects.length; i ++) {
เลือก [i] .style.visibility = การมองเห็น;
-