js+css menyadari lapisan pop-up bertopeng di tengah (bergulir dengan bilah gulir jendela browser)

js+css menyadari lapisan pop-up bertopeng di tengah (bergulir dengan bilah gulir jendela browser)

Copy kode kodenya sebagai berikut:

<!doctypehtml>

<kepala>

<meta charset="utf-8" />

<judul></judul>

<gaya tipe="teks/css">

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

html{}{_background:url(about:blank);} /**//* Cegah flashing di IE6, ganti file kosong dengan about:blank, kurangi permintaan*/

body{}{latar belakang:#fff; font: 12px/1.5 Tahoma, Jenewa, //5b8b//4f53, sans-serif tinggi:100%;}

.wrap{}{height:980px; padding-top:20px;text-align:center;}

p{}{ukuran font:14px;perataan teks:tengah;tinggi garis:24px;}

/**//** Lapisan topeng**/

#pemain topeng{}{

latar belakang:#000;

tampilan: tidak ada;

filter:alfa(opasitas = 50);

opacity:0,5;

atas:0;

kiri:0;

tinggi:100%;

lebar:100%;

indeks-z:999;

posisi: tetap;

_posisi:mutlak;

_kiri: ekspresi(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);

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

}

/**//** Lapisan pop-up**/

#popup{}{

tampilan: tidak ada;

lebar:300 piksel;

indeks-z:1000;

kiri:50%;

atas:50%;

posisi: tetap! penting;

margin-kiri:-150px !penting;

_posisi:mutlak;

_top:ekspresi(eval(document.compatMode && document.compatMode=='CSS1Compat')?

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

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

}

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

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

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

</gaya>

</kepala>

<tubuh>

<div>

<p>

Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama

<br />

Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama

<br />

Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama

<br />

Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama

<br />

Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama Saya teks utama

</p>

<input type="button" id="clickbtn" value="klik saya" />

</div>

<div id="pemain topeng"></div>

<div id="popup">

<div>

<h3> Apakah lapisan popup berada di tengah? </h3>

<p>Pusat, tengah, tengah, tengah, tengah, tengah</p>

<p>Pusat, tengah, tengah, tengah, tengah</p>

<p>Pusat, tengah, tengah, tengah</p>

<p>Pusat, tengah, tengah</p>

</div>

</div>

<skrip tipe="teks/javascript">

(fungsi(pemain topeng){

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

klikbtn.onclick = fungsi(){

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

masklayer.style.display='blok';

popup.style.display ='blok';

var h = popup.clientHeight;

dengan(popup.gaya){

marginTop = -h/2+'px';

}

}

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

</skrip>

</tubuh>

</html>