この記事では、JSとCSSによってページ全体をカバーするポップアップレイヤーを実装する方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
ポップアップ層の額装された透明な背景の一般的なスタイルと構造は次のとおりです。
コードコピーは次のとおりです。.alertmessagebg{
位置:修正;
_ポジション:絶対;
幅:100%;
高さ:100%;
左:0;
上:0;
背景:#000;
不透明度:0.5;
-moz-opacity:0.5;
フィルター:アルファ(不透明度= 50);
Z-Index:97;
表示:なし;
}
.AlertMessageVborder {
位置:修正;
_ポジション:絶対;
幅:750px;
高さ:370px;
左:50%;
トップ:50%;
マージン:-185px 0 0 -375px;
背景:#000;
フィルター:アルファ(不透明度= 30);
-moz-opacity:0.3;
不透明:0.3;
Z-Index:98;
表示:なし;
}
.AlertMessageV {
位置:修正;
_ポジション:絶対;
幅:730px;
高さ:350px;
左:50%;
トップ:50%;
マージン:-175px 0 0 -365px;
背景:#fff;
z-index:99;
表示:なし;
フォントサイズ:14px;
}
<div> </div>
<div> </div>
<div> </div>
ポップアップの背景でWebページ全体をカバーする方法
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プログラミングに役立つことを願っています。