js+css ตระหนักถึงเลเยอร์ป๊อปอัปที่ถูกมาสก์อยู่ตรงกลาง (เลื่อนด้วยแถบเลื่อนหน้าต่างเบราว์เซอร์)
คัดลอกรหัสรหัสดังต่อไปนี้:
<!doctype html>
<หัว>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{}{ระยะขอบ:0;ช่องว่างภายใน:0;}
html{}{_พื้นหลัง:url(about:blank);} /**//* ป้องกันการกระพริบใน IE6, แทนที่ไฟล์ว่างด้วย about:blank, ลดคำขอ*/
body{}{พื้นหลัง:#fff; แบบอักษร: 12px/1.5 Tahoma,เจนีวา, //5b8b//4f53, sans-serif;
.wrap{}{height:980px; padding-top:20px;text-align:center;}
p{}{font-size:14px;text-align:center;line-height:24px;}
/**//** ชั้นมาส์ก**/
#นักสวมหน้ากาก{}{
พื้นหลัง:#000;
จอแสดงผล:ไม่มี;
ตัวกรอง: อัลฟา (ความทึบ = 50);
ความทึบ:0.5;
ด้านบน:0;
ซ้าย:0;
ความสูง:100%;
ความกว้าง:100%;
ดัชนี z:999;
ตำแหน่ง:คงที่;
_ตำแหน่ง:สัมบูรณ์;
_left: นิพจน์ (documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
_top: นิพจน์ (documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
-
/**//** เลเยอร์ป๊อปอัป**/
#ป๊อปอัป{}{
จอแสดงผล:ไม่มี;
ความกว้าง:300px;
ดัชนี z:1000;
ซ้าย:50%;
ด้านบน:50%;
ตำแหน่ง:คงที่!สำคัญ;
ขอบซ้าย:-150px !สำคัญ;
_ตำแหน่ง:สัมบูรณ์;
_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{}{พื้นหลัง:#f3f3f3;border:1px solid #999;}
.content h3{}{พื้นหลัง:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;
#clickbtn{}{margin-top:20px;}
</สไตล์>
</หัว>
<ร่างกาย>
<div>
<p>
ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก
<br />
ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก
<br />
ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก
<br />
ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก
<br />
ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก ฉันเป็นข้อความหลัก
</p>
<input type="button" id="clickbtn" value="clike me" />
</div>
<div id="masklayer"></div>
<div id="ป๊อปอัพ">
<div>
<h3> เลเยอร์ป๊อปอัปอยู่ตรงกลางหรือไม่? </h3>
<p>ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง</p>
<p>ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง</p>
<p>ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง</p>
<p>ศูนย์กลาง ศูนย์กลาง ศูนย์กลาง</p>
</div>
</div>
<script type="text/javascript">
(ฟังก์ชั่น (masklayer) {
var clickbtn = document.getElementById('clickbtn');
clickbtn.onclick = ฟังก์ชั่น(){
var popup = document.getElementById('ป๊อปอัพ');
masklayer.style.display='บล็อก';
popup.style.display ='บล็อก';
var h = popup.clientHeight;
ด้วย(popup.style){
ขอบด้านบน = -h/2+'px';
-
-
})(document.getElementById('masklayer'))
</สคริปต์>
</ร่างกาย>
</html>