js と css_javascript スキルを使用してページ全体をカバーするポップアップレイヤーを実装する方法-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 16:27:37

オリジナル

1765 人が閲覧しました

この記事の例では、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プログラミングのお役に立てれば幸いです。