js+cssで中央にマスクされたポップアップレイヤーを実現（ブラウザウィンドウのスクロールバーでスクロール）
次のようにコードをコピーします。
<!doctype html>
<頭>
<meta charset="utf-8" />
<タイトル></タイトル>
<style type="text/css">
*{}{マージン:0;パディング:0;}
html{}{_background:url(about:blank);} /**//* IE6 でのフラッシュを防止し、空のファイルを about:blank に置き換え、リクエストを削減します*/
ボディ{}{背景:#fff; フォント: 12px/1.5 タホマ、ジュネーブ、//5b8b//4f53、高さ:100%;}
.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);
}
/**//** ポップアップレイヤー**/
＃ポップアップ{}{
ディスプレイ:なし;
幅:300ピクセル;
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{}{background:#f3f3f3;border:1px ソリッド #999;}
.content h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px;padding-left:5px;}
#clickbtn{}{margin-top:20px;}
</スタイル>
</head>
<本文>
<div>
<p>
私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です
<br />
私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です
<br />
私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です
<br />
私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です
<br />
私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です 私は本文です
</p>
<input type="button" id="clickbtn" value="いいね" />
</div>
<div id="マスクレイヤー"></div>
<div id="ポップアップ">
<div>
<h3> ポップアップレイヤーは中央に配置されていますか? </h3>
<p>中心、中心、中心、中心、中心、中心</p>
<p>中心、中心、中心、中心、中心</p>
<p>中心、中心、中心、中心</p>
<p>中央、中央、中央</p>
</div>
</div>
<script type="text/javascript">
(関数(マスクレイヤー){
var clickbtn = document.getElementById('clickbtn');
clickbtn.onclick = function(){
var ポップアップ = document.getElementById('ポップアップ');
マスクレイヤー.スタイル.ディスプレイ='ブロック';
Popup.style.display ='ブロック';
var h = ポップアップ.クライアントの高さ;
with(ポップアップ.スタイル){
marginTop = -h/2+'px';
}
}
})(document.getElementById('マスクレイヤー'))
</script>
</body>
</html>