การปลดรูปแบบและพฤติกรรมเมื่อใช้ Lightbox ช่วยลด JS

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-05-23 13:00:04

[เบราว์เซอร์ที่เข้าร่วมในการทดสอบ: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]

[ระบบปฏิบัติการ: Windows]

บทช่วยสอนนี้มีจุดมุ่งหมายเพื่อแยกสไตล์และพฤติกรรมใน Lightbox และลดการทำงานของ JS ในทุกด้าน (การอุดตันแบบเต็มหน้าจอ, IE6 Occlusion Select, ศูนย์กลางสองทิศทาง, เนื้อหาที่ปรับตัวสูง ฯลฯ )

อัปโหลดรหัสก่อนอื่น :

รันกล่องรหัส

<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd> xmlns = http: //www.w3.org/1999/xhtml> <head> <meta http-equiv = content-type content = text/html; charset = utf-8/> <meta name = เนื้อหาผู้เขียน = chomo/> <link rel = start href = http: //www.14px.com title = home/> <title> การบล็อกแบบเต็มหน้าจอ Padding: 0; } html, body {ความสูง: 100%; ล้น: ซ่อน; ตัวอักษร: 12px/1.5 Simsun;}. myPage {line-height: 3; ล้น: อัตโนมัติ; ความกว้าง: 100%; ความสูง: 100%;}. Lightbox, .popupcover, .popuppiframe, .popComponent {ตำแหน่ง: สัมบูรณ์; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%;}. popupComponent {z-index: 2; แสดง: ไม่มี;}. popuppiframe {display: none; _display: บล็อก; _filter: alpha (opacity = 0);}. popupcover {พื้นหลัง:#000; ความทึบ: 0.7; *ตัวกรอง: alpha (opacity = 70);}. lightbox {text-allign: center; Overflow: auto;}. LightboxContent {display: inline-block; *แสดง: อินไลน์; ซูม: 1; ความกว้าง: 300px; Padding: 10px; ความเป็นมา: #FFF; ชายแดน: 5px Solid #00B4FF; แนวตั้ง-จัดตำแหน่ง: middle;}. LightboxMaxHeight {display: inline-block; แนวตั้ง-แนว: กลาง; ความสูง: 100%; *ความสูง: 99.5%; ความกว้าง: 1px; ล้น: ซ่อน; ขอบซ้าย: -1px;}. LightboxWrapper {display: inline-block; *แสดง: อินไลน์; ซูม: 1; TEXT-ALIGN: ซ้าย;}. LightBoxClose {Color:#F00;}. LightBoxSubMit {margin-top: 10px; Padding-Top: 5px; Border-top: 1px solid #ccc;}. อินพุต Lightboxsubmit {ตัวอักษรขนาด: 12px; Padding: 0 10px; ล้น: มองเห็นได้; ระยะขอบ: 0 5px;} </style> </head> <body> <div class = popupComponent id = lightbox> <iframe class = popupComponent id = lightbox> <iframe class = popupcover> </div> ข้อความอยู่ตรงกลาง <br/> </div> <div class = lightboxsubmit> <ประเภทอินพุต = ค่าปุ่ม = กำหนด onclick = hidelayer ('lightbox')/> <ประเภทอินพุต = ค่าปุ่ม = ยกเลิก onClick = hidelayer ('lightbox')/> </div> class = popupframe> </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 /> เมื่อเนื้อหามีความสูงเกินหนึ่งหน้าจอเมื่อเนื้อหามีความสูงเกินหนึ่งหน้าจอหนึ่งเมื่อเนื้อหามีความสูงเกินหนึ่งหน้าจอเมื่อเนื้อหามีความสูงเกินหนึ่งหน้าจอ <br /> เมื่อเนื้อหามีความสูงเกินหนึ่งหน้าจอเมื่อเนื้อหาเกินความสูงของหน้าจอหนึ่งเมื่อเนื้อหามีความสูงเกินหนึ่งหน้าจอ <br/> </div> <div class = lightboxsubmit> <ประเภทอินพุต = ค่าปุ่ม = กำหนด onclick = hidelayer ('lightbox2')/> <ประเภทอินพุต = ปุ่ม = ยกเลิก onClick = hidelayer ('lightbox2')/> </div> </div> < เนื้อหาที่อุดมไปด้วย <br /> แกล้งทำเป็นเนื้อหาที่อุดมไปด้วย <br /> แกล้งทำเป็นเนื้อหาที่อุดมไปด้วย <br /> แกล้งทำเป็นเนื้อหาที่อุดมไปด้วย <br /> <div style = text-allign: center;> <อินพุตประเภท = ปุ่มค่า = ปุ่มปุ่ม onclick = showlayer ('lightbox') /> </div> /> การแกล้งเนื้อหาที่อุดมไปด้วย <br /> การแกล้งเนื้อหาที่อุดมไปด้วย <br /> การแกล้งเนื้อหาที่อุดมไปด้วย <br /> การแกล้งเนื้อหาที่หลากหลาย <br /> เนื้อหาที่อุดมไปด้วย <br /> เนื้อหาที่อุดมไปด้วย <br /> <div style = text-allign: center;> <ประเภทอินพุต = ปุ่ม valde = button rold rold /> การแกล้งเนื้อหาที่อุดมไปด้วย <br /> การแกล้งเนื้อหาที่หลากหลาย <br /> แกล้งทำเป็นเนื้อหาที่อุดมสมบูรณ์ <br /> แกล้งทำเป็นเนื้อหาที่หลากหลาย <br /> การแกล้งเนื้อหาที่หลากหลาย <br /> การแกล้งเนื้อหาที่หลากหลาย <br /> การแกล้งเนื้อหาที่สมบูรณ์ <br /> /> <elect> เนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แสร้งทำ /> <elect> <petion> เลือกอื่นสำหรับการทดสอบว่า IE6 สามารถครอบคลุม </petion> < /select> <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> <div style = text-align: center;> <อินพุตประเภท = ปุ่ม = ปุ่ม onclick = showlayer ('lightbox2') /> </div> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นว่าอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นเนื้อหา <br /> แกล้งทำ /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำ เนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นเนื้อหา <br /> แสร้งทำ อุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นอุดมไปด้วยเนื้อหา <br /> แกล้งทำเป็นเนื้อหา <br /> แกล้งทำ hidelayer (id) {document.getElementById (id) .style.display = none;} </script> </body> </html>

[Ctrl+A เคล็ดลับการเลือกทั้งหมด: คุณสามารถแก้ไขรหัสบางอย่างก่อนจากนั้นกด Run]

Lightbox นี้มีคุณสมบัติดังต่อไปนี้คุณสามารถทดสอบได้โดยการแก้ไขรหัส ^- ^:

การคลิกที่ตำแหน่งใด ๆ ในหน้าสามารถครอบคลุมหน้าจอได้อย่างสมบูรณ์ (ในเวลานี้องค์ประกอบใด ๆ รวมถึงแถบเลื่อนไม่สามารถควบคุมได้โดยตรง) องค์ประกอบที่เลือกสามารถถูกบล็อกได้โดยไม่ต้องซ่อนอยู่ใน IE6 (ข้อบกพร่องของวิธีการอุดตันของ iframe: หลังจากการบล็อกหากแถบเลื่อนถูกลากการเลือกจะยังคงย้ายไปที่ระดับบนสุด)
Lightbox สามารถปรับให้เข้ากับเนื้อหาได้อย่างมากและนำเสนอสถานะศูนย์กลางที่สมบูรณ์แบบ
เมื่อเนื้อหาเป็นบรรทัดเดียวมันจะปรากฏขึ้นที่กึ่งกลาง เมื่อเนื้อหาเป็นแบบหลายบรรทัดจะแสดงทางด้านซ้าย เมื่อความสูงของเนื้อหาทำให้ Lightbox สูงกว่าความสูงของหน้าจอจะปรากฏแถบเลื่อนและแสดงอยู่ด้านบนดังนั้นผู้อ่านสามารถอ่านได้ในภาพที่สมบูรณ์

หากคุณสนใจเคล็ดลับต่อไปนี้สำหรับการสร้าง Lightbox นี้จะพร้อมให้คุณอ้างถึง:

1. วิธีการแรเงาแบบเต็มหน้าจอ:

. ซ่อนแถบเลื่อนของ HTML/ตัว

ข. ใช้ div เป็นหน้ากากแล้วใช้ div เป็นหน้าเว็บที่มีแถบเลื่อนหนึ่งซ้อนกันด้านบนและหนึ่งซ้อนกันด้านล่าง

รันกล่องรหัส