js と css_javascript スキルを使用してページ全体をカバーするポップアップ レイヤーを実装する方法

この記事の例では、js と css を使用してページ全体を覆うポップアップ レイヤーを実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

透明な背景フレームを持つポップアップ レイヤーの一般的なスタイルと構造は次のとおりです:

コードをコピー コードは次のとおりです:

.alertMessageBg{
位置:固定;
_位置:絶対;
幅:100%;
高さ:100%;
左:0;
トップ:0;
背景:#000;
不透明度:0.5;
-moz-opacity:0.5;
フィルター:アルファ(不透明度=50);
z-index:97;
表示:なし;
}
.alertMessageDivBorder{
位置:固定;
_位置:絶対;
幅:750px;
高さ:370px;
左:50%;
トップ:50%;
マージン:-185px 0 0 -375px;
背景:#000;
フィルター:アルファ(不透明度=30);
-moz-opacity:0.3;
不透明度:0.3;
z-index:98;
表示:なし;
}
.alertMessageDiv{
位置:固定;
_位置:絶対;
幅:730px;
高さ:350px;
左:50%;
トップ:50%;
マージン:-175px 0 0 -365px;
背景:#fff;
z-index:99;
表示:なし;
フォントサイズ:14px;
}

ウェブページ全体をポップアップレイヤーの背景で覆う方法

1.css メソッド

コードをコピー コードは次のとおりです:

.alertMessageBg{
位置:固定;
_位置:絶対;
幅:100%;
高さ:100%;
左:0;
トップ:0;
背景:#000;
不透明度:0.5;
-moz-opacity:0.5;
フィルター:アルファ(不透明度=50);
z-index:97;
表示:なし;
}

2.js メソッド

コードをコピー コードは次のとおりです:

.alertMessageBg{
位置:絶対;
幅:100%;
高さ:100%;
左:0;
トップ:0;
背景:#000;
不透明度:0.5;
-moz-opacity:0.5;
フィルター:アルファ(不透明度=50);
z-index:97;
表示:なし;
}

var bgWidth = document.body.clientWidth 'px',
bgHeight = document.body.clientHeight 'px',
alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});

上記の 2 つの方法を比較すると、特に IE6 と互換性がないため、css 方法の方が問題が少ないことは明らかです。

この記事が皆様のJSベースのWebプログラミングのお役に立てれば幸いです。