مسألة قضبان تمرير طبقة القناع شائعة

المشكلة التي واجهتها اليوم هي أن طبقة القناع خلف الطبقة المنبثقة تحتوي على شريط تمرير ، لذلك لا توجد طبقة قناع في المنطقة غير المرئية أسفل شريط التمرير. الحل هو إضافة CSS.

رمز JS

 <script type = "text/javaScript"> // show gray js mask function showbg (ct ، content) {var bh = $ (document) .height () ؛ var bw = $ ("body"). width ()+16 ؛ var objwh = getObjWh (ct) ؛ $ ("#fullbg"). css ({width: bw ، الارتفاع: bh ، العرض: var tbt = objwh.split ("|") [0]+"px" ؛ var tbl = objwh.split ("|") [1]+"px" ؛ $ ("#dialog"). show () ؛ $ ("#"+ct) .css ({top: tbt ، left: 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) .hight () ؛ // ارتفاع الكائن العائم var objw = $ ("#"+obj) .width () ؛ // عرض الكائن العائم var objt = number (st)+(number (ch)-number (objh))/2 ؛ var objl = number (sl)+(number (cw) -number (objw))/2 ؛ إرجاع objt+"|"+objl ؛ } وظيفة resetBg () {var fullbg = $ ("#fullbg"). css ("display") ؛ if (fullbg == "block") {var bh2 = $ ("body"). height () ؛ var bw2 = $ ("body"). width ()+16 ؛ $ ("#fullbg"). css ({width: bw2 ، الارتفاع: bh2}) ؛ var objv = getObjWh ("Dialog") ؛ var tbt = objv.split ("|") [0]+"px" ؛ var tbl = objv.split ("|") [1]+"px" ؛ $ ("#Dialog"). css ({top: tbt ، left: tbl}) ؛ }} // أغلق طبقة قناع JS الرمادية ووظيفة نافذة التشغيل levingbg () {$ ("#fullbg"). css ("display" ، "none") ؛ $ ("#Dialog"). CSS ("Display" ، "None") ؛} </script>

رمز CSS

 #fullbg {background-color: Gray ؛ العرض: لا شيء ؛ 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) ؛ filter: alpha (عتامة = 30) ؛ العتامة: 0.3 ؛ } #dialog {width: 560px ؛ الخلفية: #EEE ؛ العرض: لا شيء ؛ Z-index: 5 ؛ Padding: 16px ؛ حجم الخط: 12px ؛ z-index: 1000 ؛ الموضع: absolute ؛}#مربع الحوار sup {color:#f00 ؛}#Dialog .Close0 {position: relative ؛ أعلى: -24px ؛ اليسار: 544px ؛ الارتفاع: 38 بكسل ؛ العرض: 40 بكسل ؛}

رمز HTML

 <div id = "fullbg"> </div> <!-end js layer-> <!-dialog-> <div id = "dialog"> <viv> <a href = "#" onClick = "closeBg () ؛ المعلومات </h3> <p> (ملاحظة: يتم استخدام المعلومات التالية فقط لإرسال مواد الخدمة ذات الصلة حسب الحاجة ، ولن تتسرب المعلومات. يرجى الفهم) </p> <table cellpacing = "1" cellpadding = "0" bgColor = "#fbfbfb"> <b> {$ member.member_name} </b> </td> <td bgcolor = "#eeeeeee"> <sup>*</sup> الاسم الحقيقي </td> <td bgcolor = bgcolor = "#eeeeeeeee"> الجنس </td> <td bgcolor = "#fbfbfb"> <b> <pp> echo $ الجنس [$ info ['gender']] <td bgcolor = "#fbfbfb"> <b> {$ info.telephone} </b> </td> <td bgcolor = "#eeeeeee"> البريد الإلكتروني </td> <td colspan = "3" bgcolor = "#fbfbfb"> <tr> <td colspan = "2" bgColor = "#eeeeeeeee"> <sup>*</sup> معرف صالح (بطاقة معرف) </td> <td colspan = "4" bgcolor = "#fbfbfb"> <b> {$ info.ids} </b> </td> bgcolor = "#eeeeeee" العنوان البريدي </td> <td colspan = "3" bgcolor = "#fbfbfb" bgcolor = "#fbfbfb"> <b> {$ info.zips} </b> </td> </tr> </tabl

تهدئة وانتقل خطوة بخطوة.

المقال أعلاه هو كليشيهات حول مسألة شريط التمرير طبقة القناع. هذا هو كل المحتوى الذي أشاركه معك. آمل أن تتمكن من إعطائك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.