يدرك js+css الطبقة المنبثقة المقنعة في المنتصف (التمرير باستخدام شريط التمرير في نافذة المتصفح)

يدرك js+css الطبقة المنبثقة المقنعة في المنتصف (التمرير باستخدام شريط التمرير في نافذة المتصفح)

انسخ رمز الكود كما يلي:

<!نوع الوثيقة html>

<الرأس>

<meta charset="utf-8" />

<العنوان></العنوان>

<نمط النوع = "نص/CSS">

*{}{margin:0;padding:0;}

html{}{_background:url(about:blank);} /**//* منع الوميض في IE6، واستبدال الملفات الفارغة بـ about:blank، وتقليل الطلبات*/

body{}{background:#fff;

.wrap{}{height:980px;

ص {}{font-size:14px;text-align:center;line-height:24px;}

/**//** طبقة القناع**/

#قناع_الطبقة{}{

الخلفية:#000;

العرض: لا شيء؛

عامل التصفية: ألفا (التعتيم = 50)؛

العتامة: 0.5؛

أعلى:0؛

اليسار:0؛

الارتفاع: 100%؛

العرض: 100%؛

مؤشر ض: 999؛

الموقف: ثابت؛

_الموضع:مطلق؛

_left: Expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);

_top: Expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);

}

/**//** الطبقة المنبثقة**/

#يظهر فجأة{}{

العرض: لا شيء؛

العرض: 300 بكسل؛

مؤشر z:1000;

اليسار:50%;

أعلى:50%;

الموقف:ثابت!مهم؛

الهامش الأيسر:-150 بكسل! مهم؛

_الموضع:مطلق؛

_top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')؟

documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/

document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2) /**//*IE5 IE5.5*/);

}

.content{}{background:#f3f3f3;border:1px Solid #999;}

.content h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;

#clickbtn{}{margin-top:20px;}

</نمط>

</الرأس>

<الجسم>

<ديف>

<ص>

أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي

<br />

أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي

<br />

أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي

<br />

أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي

<br />

أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي أنا النص الرئيسي

</ص>

<input type = "button" id = "clickbtn" value = "clike me" />

</div>

<div id="masklayer"></div>

<div معرف = "المنبثقة">

<ديف>

<h3> هل الطبقة المنبثقة في المنتصف؟ </h3>

<p>المركز، المركز، المركز، المركز، المركز، المركز</p>

<p>المركز، المركز، المركز، المركز، المركز</p>

<p>المركز، المركز، المركز، المركز</p>

<p>المركز، المركز، المركز</p>

</div>

</div>

<نوع البرنامج النصي = "نص/جافا سكريبت">

(وظيفة(قناع){

var clickbtn = document.getElementById('clickbtn');

Clickbtn.onclick = function(){

var popup = document.getElementById('popup');

Masklayer.style.display='block';

popup.style.display ='block';

var h = popup.clientHeight;

مع (popup.style){

MarginTop = -h/2+'px';

}

}

})(document.getElementById('masklayer'))

</script>

</الجسم>

</html>