คำนำ: โครงการ บริษัท จำเป็นต้องใช้เฟรมป๊อปอัพไปยังศูนย์ในแนวตั้ง เลเยอร์ป๊อปอัพที่อยู่ตรงกลางในแนวตั้งที่คล้ายกันบนอินเทอร์เน็ตนั้นคล้ายคลึงกัน เนื่องจากโครงการขึ้นอยู่กับ jQuery ให้ใช้ $ (หน้าต่าง) .Height ()-layer.height ())/2 +$ (เอกสาร) .scrolltop () เพื่อรับการกระจัดในแนวตั้ง ฉันทดสอบเบราว์เซอร์ทุกชนิดโดยไม่มีปัญหาใด ๆ หลังจากที่บุคลากรพื้นหลังย้ายมูลค่าไปยังโครงการมีปัญหา เมื่อหน้าเกินหนึ่งหน้าจอภายใต้ Chrome และ FF กล่องป๊อปอัพไม่ได้อยู่กึ่งกลางในแนวตั้งในหน้าจอปัจจุบัน แต่อยู่ตรงกลางสัมพันธ์กับเว็บเพจทั้งหมด
หลังจากตรวจสอบข้อมูลจากทุกฝ่ายข้อสรุปทั้งหมดระบุ:
1. ความสูงของหน้าต่าง, $ (หน้าต่าง) .Height ()
2. ความสูงของเอกสาร, $ (เอกสาร) .Height ()
3. ความสูงของการรีดขึ้น $ (หน้าต่าง). scrolltop ()
ค้นหาเหตุผล : จากนั้นฉันพบว่าหน้าของบุคลากรแบ็กเอนด์ไม่มี doctype ดังนั้นใน Chrome, $ (หน้าต่าง) .Height () = $ (เอกสาร) .Height (), $ (เอกสาร) .Height () หมายความว่าเมื่อความสูงของเนื้อหาจริงของหน้าจอ เมื่อหน้าเกินหนึ่งหน้าจอจะแสดงเป็นความสูงที่แท้จริงของเนื้อหาเว็บเพจทั้งหมด ไม่มีการคัดค้านเรื่องนี้และไม่มีผลกับการตั้งค่า doctype หรือไม่ อย่างไรก็ตาม: $ (window) .height () อยู่ในช่วงเปลี่ยนผ่าน dtd ไม่ว่าความสูงที่แท้จริงของเนื้อหาหน้าเว็บจะเกินหน้าจอเต็มรูปแบบหรือไม่ก็เท่ากับความสูงของหน้าต่างทั้งหมด (ค่าจะเปลี่ยนเมื่อหน้าต่างขยายและลดลง) หากไม่ได้ตั้งค่า doctype, $ (หน้าต่าง) .height () = $ (เอกสาร) .height () นั่นคือเมื่อเนื้อหาเกินหนึ่งหน้าจอ $ (หน้าต่าง) .Height () เป็นความสูงที่แท้จริงของหน้าเว็บซึ่งไม่ใช่สิ่งที่กล่าวว่าเท่ากับความสูงของหน้าต่าง
สารละลาย:
เพื่อให้ได้ความสูงของหน้าต่างคุณสามารถทำการเปลี่ยนแปลงที่สอดคล้องกันตาม Doctype เท่านั้น หากไม่ได้ตั้งค่า Doctype การประมวลผลต่อไปนี้จะเสร็จสิ้น
if ($ (เอกสาร) .height ()> = $ (หน้าต่าง) .height ()) {_windowHeight = document.body.clientheight; } else {// alert ($ (window) .height ()); _windowHeight = $ (เอกสาร) .Height (); -เมื่อ Doctype ถูกตั้งค่าเป็น transitional.dtd, windowheight = $ (หน้าต่าง) .height ()
การอภิปรายสั้น ๆ ข้างต้นเกี่ยวกับผลกระทบของ Doctype เกี่ยวกับมูลค่า $ (หน้าต่าง) .Height () เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น