HTMLでマスクレイヤーを実装する方法 HTMLでマスクレイヤーを使用する方法

Web ページでマスクレイヤーを使用すると、繰り返しの操作を防ぎ、読み込みを促進できます。また、ポップアップモーダルウィンドウをシミュレートすることもできます。

実装のアイデア: 1 つの DIV がマスクレイヤーとして使用され、1 つの DIV に読み込み中の動的 GIF 画像が表示されます。次のサンプルコードは、iframe サブページでマスクレイヤーの表示と非表示を切り替える方法も示しています。

サンプルコード:

インデックス.html

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html >
< html lang = "zh-CN" >
<ヘッド>
<メタ文字セット= "utf-8" >
<メタ http-equiv = "X-UA 互換" コンテンツ= "IE=edge" >
< title > HTML マスクレイヤー</ title >
<リンク rel = "スタイルシート" href = "css/index.css" >
</ヘッド>
<本文>
< div クラス= "ヘッダー" id = "ヘッダー" >
< div クラス= "タイトル外側" >
<スパンクラス= "タイトル" >
HTML マスクレイヤーの使用
</スパン>
</div>
</div>
< div クラス= "body" id = "本文" >
<インラインフレーム id = "iframeRight" 名前= "iframeRight" 幅= "100%" 高さ= "100%"
スクロール= "いいえ" フレームボーダー= "0"
style = "境界線: 0px;余白: 0px;パディング: 0px;幅: 100%;高さ: 100%;オーバーフロー: 非表示;"
onload = "rightIFrameLoad(this)" src = "body.html" > </ iframe >
</div>
< div id = "オーバーレイ" クラス= "オーバーレイ" > </ div >
< div id = "読み込み中のヒント" クラス= "読み込みのヒント" >
<画像 src = "images/loading.gif" />
</div>
< div クラス= "モーダル" id = "modalDiv" > </ div >
<スクリプトタイプ= 'text/javascript' src = "js/jquery-1.10.2.js" > </スクリプト>
<スクリプトタイプ= "テキスト/javascript" src = "js/index.js" > </スクリプト>
</本文>
</html>

インデックス.css

CSSコードコンテンツをクリップボードにコピー

* {
マージン:0;
パディング: 0;
}
html、本文{
幅: 100%;
高さ: 100%;
フォントサイズ: 14px ;
}
div.ヘッダー{
幅: 100%;
高さ: 100px ;
下ボーダー: 1px 破線青;
}
div.title-outer {
位置:相対的;
上位：50%
高さ: 30px ;
}
span.title {
テキスト配置:左;
位置:相対的;
左：3％
上: -50%;
フォントサイズ: 22px ;
}
div.body {
幅: 100%;
}
。かぶせる {
位置:絶対;
上: 0px ;
左: 0px ;
zインデックス: 10001;
表示:なし;
フィルター:アルファ(不透明度=60);
背景色: #777 ;
不透明度: 0.5;
-moz-不透明度: 0.5;
}
.読み込みヒント {
zインデックス: 10002;
位置：固定;
表示:なし;
}
.loading-tip 画像 {
幅: 100px ;
高さ: 100px ;
}
.モーダル{
位置:絶対;
幅: 600px ;
高さ: 360px ;
境界線: 1ピクセルソリッドrgba(0, 0, 0, 0.2);
ボックスシャドウ: 0px 3ピクセル 9px RGBA(0, 0, 0, 0.5);
表示:なし;
zインデックス: 10003;
境界線-半径: 6px ;
}

インデックス

JavaScriptコードコンテンツをクリップボードにコピー

関数rightIFrameLoad(iframe) {
var pHeight = getWindowInnerHeight() - $( '#header' ).height() - 5;
$( 'div.body' ).height(pHeight);
コンソールにログ出力します。
}
// ブラウザの互換性ブラウザの表示領域の高さを取得します
関数getWindowInnerHeight() {
var winHeight = window.innerHeight
|| (document.documentElement && document.documentElement.clientHeight)
document.body のクライアントの高さを設定します。
winHeightを返します。
}
// ブラウザの互換性ブラウザの表示領域の幅を取得します
関数getWindowInnerWidth() {
var winWidth = window.innerWidth
|| (document.documentElement && document.documentElement.clientWidth)
|| (document.body && document.body.clientWidth);
winWidthを返します。
}
/**
* マスクレイヤーを表示
*/
関数showOverlay() {
// マスクレイヤーの幅と高さはページコンテンツの幅と高さです
$( '.overlay' ).css({ 'height' :$(document).height(), 'width' :$(document).width()});
$( '.overlay' ).show();
}
/**
* 読み込みプロンプトを表示する
*/
関数showLoading() {
// 最初にマスクレイヤーを表示する
オーバーレイを表示します。
// 読み込みプロンプトウィンドウが中央に配置されます
$( "#loadingTip" ).css( 'top' ,
(getWindowInnerHeight() - $( "#loadingTip" ).height()) / 2 + 'px' );
$( "#loadingTip" ).css( 'left' ,
(getWindowInnerWidth() - $( "#loadingTip" ).width()) / 2 + 'px' );
$( "#loadingTip" ).show();
$(document).scroll(関数() {
戻る間違い;
});
}
/**
* 読み込みプロンプトを非表示
*/
関数hideLoading() {
$( '.overlay' ).hide();
$( "#loadingTip" ).hide();
$(document).scroll(関数() {
戻る真実;
});
}
/**
* ポップアップモーダルウィンドウDIVをシミュレートする
* @param innerHtml モーダルウィンドウの HTML コンテンツ
*/
関数showModal(innerHtml) {
// シミュレートされたモーダルウィンドウを表示するために使用する DIV を取得します
varダイアログ = $( '#modalDiv' );
//コンテンツを設定する
ダイアログ.html(内部HTML);
//モーダルウィンドウのDIVウィンドウを中央に配置する
ダイアログ.css({
'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px' 、
'左' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'
});
// ウィンドウ DIV 丸い角
dialog.find( '.modal-container' ).css( 'border-radius' , '6px' );
// モーダルウィンドウの閉じるボタンイベント
dialog.find( '.btn-close' ).click(関数(){
モーダルを閉じる();
});
// マスクレイヤーを表示する
オーバーレイを表示します。
// マスクレイヤーを表示する
ダイアログを表示します。
}
/**
* モーダルウィンドウのDIVを閉じることをシミュレートする
*/
関数closeModal() {
$( '.overlay' ).hide();
$( '#modalDiv' ).hide();
$( '#modalDiv' ).html( '' );
}

本文.html

XML/HTML コードコンテンツをクリップボードにコピー

<!DOCTYPE html >
< html lang = "zh-CN" >
<ヘッド>
<メタ文字セット= "utf-8" >
<メタ http-equiv = "X-UA 互換" コンテンツ= "IE=edge" >
<タイトル>本文</タイトル>
<スタイルタイプ= "text/css" >
* {
マージン: 0;
パディング: 0;
}
html、本文{
幅: 100%;
高さ: 100%;
}
.外側{
幅: 200ピクセル;
高さ: 120px;
位置: 相対的;
上位: 50%;
左: 50%;
}
.インナー{
幅: 200ピクセル;
高さ: 120px;
位置: 相対的;
上: -50%;
左: -50%;
}
。ボタン {
幅: 200ピクセル;
高さ: 40px;
位置: 相対的;
}
.button#btn読み込み中を表示{
上: 0;
}
.button#btnモーダル表示 {
上位: 30%
}
</スタイル>
<スクリプトタイプ= "text/javascript" >
関数 showOverlay() {
// 親ウィンドウを呼び出してマスクレイヤーと読み込みプロンプトを表示します
ウィンドウの上部に読み込みを表示します。
// タイマーを使用して読み込みプロンプトを閉じることをシミュレートします
setTimeout(関数() {
ウィンドウの上部にウィンドウを非表示にする();
}, 3000);
}
関数 showModal() {
//ポップアップモーダルウィンドウをシミュレートするために親ウィンドウメソッドを呼び出す
ウィンドウの上部にモーダルを表示します($('#modalContent').html());
}
</スクリプト>
</ヘッド>
<本文>
< div クラス= '外側' >
< div クラス= 'inner' >
<ボタン id = 'btnShowLoading' クラス= 'ボタン' onclick = 'showOverlay();' >クリックするとオーバーレイレイヤーがポップアップします</ button >
<ボタン id = 'btnShowModal' クラス= 'ボタン' onclick = 'showModal();' >クリックするとモーダルウィンドウが表示されます</ button >
</div>
</div>
< div id = 'モーダルコンテンツ' スタイル= '表示: なし;' >
< div クラス= 'モーダルコンテナ' スタイル= '幅: 100%;高さ: 100%;背景色: 白;' >
< div スタイル= '幅: 100%;高さ: 49px;位置: 相対;左: 50%;上: 50%;' >
<スパン style = 'font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;' >モーダルウィンドウ 1 </ span >
</div>
<ボタンクラス= 'btn-close' style = '幅: 100px; 高さ: 30px; 位置: absolute; 右: 30px; 下: 20px ; ' >閉じる</button>
</div>
</div>
<スクリプトタイプ= 'text/javascript' src = "js/jquery-1.10.2.js" > </スクリプト>
</本文>
</html>