ปัญหาที่ฉันพบในวันนี้คือเลเยอร์หน้ากากที่อยู่ด้านหลังชั้นป๊อปอัพมีแถบเลื่อนดังนั้นจึงไม่มีเลเยอร์หน้ากากในพื้นที่ที่มองไม่เห็นภายใต้แถบเลื่อน วิธีแก้ปัญหาคือการเพิ่ม CSS
รหัส JS
<script type = "text/javascript"> // แสดงฟังก์ชั่นเลเยอร์เลเยอร์ JS สีเทา JS showbg (ct, เนื้อหา) {var bh = $ (เอกสาร) .height (); var bw = $ ("body"). ความกว้าง ()+16; var objwh = getobjwh (ct); $ ("#fullbg"). css ({width: bw, ความสูง: bh, display: "block"}); var tbt = objwh.split ("|") [0]+"px"; var tbl = objwh.split ("|") [1]+"px"; $ ("#dialog"). show (); $ ("#"+ct) .css ({top: tbt, ซ้าย: tbl, display: "block"}); $ (window) .scroll (function () {resetbg ()}); $ (window) .resize (function () {resetbg ()}); } ฟังก์ชั่น getobjwh (obj) {var st = document.documentelement.scrolltop; // ระยะทางของแถบเลื่อนไปที่ด้านบน var sl = document.documentelement.scrollleft; // ระยะทางของแถบเลื่อนไปทางซ้าย หน้าจอ var objh = $ ("#"+obj) .height (); // ความสูงของวัตถุลอยตัว var objw = $ ("#"+obj) .width (); // ความกว้างของวัตถุลอยตัว var objt = จำนวน (st)+(หมายเลข (ch) var objl = number (sl)+(number (cw) -number (objw))/2; ส่งคืน objt+"|"+objl; } function resetbg () {var fullbg = $ ("#fullbg"). css ("แสดง"); if (fullbg == "block") {var bh2 = $ ("body"). ความสูง (); var bw2 = $ ("body"). ความกว้าง ()+16; $ ("#fullbg"). css ({width: bw2, ความสูง: bh2}); var objv = getobjwh ("กล่องโต้ตอบ"); var tbt = objv.split ("|") [0]+"px"; var tbl = objv.split ("|") [1]+"px"; $ ("#dialog"). css ({top: tbt, ซ้าย: tbl}); }} // ปิดเลเยอร์หน้ากาก JS สีเทาและฟังก์ชั่นหน้าต่างการดำเนินการปิด () {$ ("#fullbg"). CSS ("แสดง", "ไม่มี"); $ ("#dialog"). css ("แสดง", "ไม่มี");} </script>รหัส CSS
#fullbg {พื้นหลังสี: สีเทา; แสดง: ไม่มี; z-index: 3; ซ้าย: 0px; ความทึบ: 0.5; ด้านบน: 0; ซ้าย: 0; ความสูง: 100%; ความกว้าง: 100%; z-index: 999; ตำแหน่ง: แก้ไข; _position: สัมบูรณ์; _left: Expression_r (DocumentElement.scrollleft + DocumentElement.ClientWidth - this.offsetWidth); _top: expression_r (documentelement.scrolltop + documentelement.clientheight - this.offsetheight); ตัวกรอง: alpha (opacity = 30); ความทึบ: 0.3; } #dialog {width: 560px; ความเป็นมา: #eee; แสดง: ไม่มี; z-index: 5; Padding: 16px; ขนาดตัวอักษร: 12px; z-index: 1000; ตำแหน่ง: Absolute;}#Dialog Sup {color:#f00;}#dialog .close0 {ตำแหน่ง: ญาติ; ด้านบน: -24px; ซ้าย: 544px; ความสูง: 38px; ความกว้าง: 40px;}รหัส HTML
<div id = "fullbg"> </div> <!-end js mask layer-> <!-dialog-> <div id = "dialog"> <div> <a href = "#" onclick = "closebg ();"> <img src = "__ img __/close.png ข้อมูล </h3> <p> (หมายเหตุ: ข้อมูลต่อไปนี้ใช้เพื่อส่งเอกสารบริการที่เกี่ยวข้องให้คุณตามต้องการและจะไม่รั่วไหลข้อมูลโปรดเข้าใจ) </p> <table cellpacing = "1" cellpadding = "0"> <tr> <td bgcolor = "#eeeeee bgcolor = "#fbfbfb"> <b> {$ member.member_name} </b> </td> <td bgcolor = "#eeeeeee"> <sup>*</sup> ชื่อจริง </td> <td bgcolor = "#fbfbfb" bgcolor = "#eeeeeeee"> เพศ </td> <td bgcolor = "#fbfbfb"> <b> <php> echo $ gender [$ info ['เพศ']; </php> </b> </td> <td bgcolor = "#fbfbfb"> <b> {$ info.telephone} </b> </td> <td bgcolor = "#eeeeee"> อีเมล </td> <td colspan = "3" bgcolor = "#fbfbfb" <tr> <td colspan = "2" bgcolor = "#eeeeeeeee"> <up>*</sup> ID ที่ถูกต้อง (บัตรประจำตัว) </td> <td colspan = "4" bgcolor = "#fbfbfb"> <b> {$ info.ids} </b> bgColor = "#eeeeeee"> ที่อยู่ทางไปรษณีย์ </td> <td colspan = "3" bgcolor = "#fbfbfb"> <b> {$ info.address} </b> </td> <td bgcolor = "#eeeee bgColor = "#fbfbfb"> <b> {$ info.zips} </b> </td> </tr> </table> </div> </div>สงบลงและดำเนินการทีละขั้นตอน
บทความข้างต้นเป็นความคิดโบราณเกี่ยวกับปัญหาของแถบเลื่อนเลเยอร์หน้ากาก นี่คือเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น