HTMLでマスクレイヤーを実装する方法 HTML_HTML/Xhtml_Webページ制作でマスクレイヤーを使用する方法-htmlチュートリアル-php.cn

HTMLでマスクレイヤーを実装する方法 HTML_HTML/Xhtml_Webページ制作でマスクレイヤーを使用する方法

WBOY

リリース： 2016-05-16 16:45:59

オリジナル

1625 人が閲覧しました

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

実装アイデア: 1 つの DIV はマスクレイヤとして機能し、1 つの DIV は読み込み中の動的 GIF イメージを表示します。次のサンプルコードでは、iframe サブページで表示および非表示のマスクレイヤーを呼び出す方法も示しています。

サンプルコード:

index.html

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

>
<html lang="zh- CN「>
<頭>
<meta charset="utf- 8">
<メタ http-equiv=" X-UA-Compatible" コンテンツ="IE=edge">
<タイトル>HTML遮蔽罩层タイトル>
<リンク rel="スタイルシート" href="css/index.css">
頭>
<ボディ>
<div class="ヘッダー" id="ヘッダー">
<div class="title-外側">
<スパンクラス="タイトル" >
HTML遮蔽罩层使用
スパン>
div>
div>
<div class="body" id="body">
<iframe id="iframeRight" 名前="iframeRight" 幅="100%" 身長="100%"
スクロール=「いいえ」 frameborder="0"
style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow : 非表示;"
onload="rightIFrameLoad(this)" src="body.html">iframe>
div>
<div id="オーバーレイ" クラス="オーバーレイ">div>
<div id="loadingTip" クラス="loading-tip">
<img src="images/ reading.gif" />
div>
<div class="モーダル" id="modalDiv">div>
<スクリプト type='text/ javascript' src="js/jquery-1.10.2.js"> スクリプト>
<スクリプト type="text/ javascript" src="js/index.js">< ;/スクリプト>
ボディ>
html>

index.css

CSS コード剪定板への复制コンテンツ

* {
マージン: 0;
パディング: 0;
}
html, body {
幅: 100%;
身長: 100%;
フォントサイズ: 14px;
}
div.header {
幅: 100%;
高さ: 100px;
ボーダー下: 1px 破線青;
}
div.title-outer {
位置: 相対;
トップ: 50%;
高さ: 30px;
}
span.title {
text-align: left;
位置: 相対;
左: 3%;
トップ: -50%;
フォントサイズ: 22px;
}
div.body {
幅: 100%;
}
.overlay {
位置: 絶対;
トップ: 0px;
左: 0px;
z-index: 10001;
表示:なし;
フィルター:alpha(opacity=60);
背景色: #777;
不透明度: 0.5;
-moz-opacity: 0.5;
}
.loading-tip {
z-index: 10002;
位置: 固定;
表示:なし;
}
.loading-tip img {
幅:100px;
高さ:100px;
}
.modal {
位置:絶対;
幅: 600px;
高さ: 360px;
ボーダー: 1px solid rgba(0, 0、0、0.2）;
box-shadow: 0px 3px 9px rgba (0, 0, 0, 0.5);
表示: なし;
z-index: 10003;
ボーダー-半径: 6px;
}

index.js

JavaScript コード复制コンテンツ到剪贴板

関数 rightIFrameLoad(iframe) {
var pHeight = getWindowInnerHeight() - $('#header').height() - 5 ;
$('div.body').height(pHeight);
// ブラウザの互換性ブラウザのビューポートの高さを取得します
関数 getWindowInnerHeight() {
var winHeight = window.innerHeight
winHeight;
}
getWindowInnerWidth() {
winWidth = window.innerWidth || (document.documentElement && document.documentElement.clientWidth)
|| (document.body && document.body.clientWidth);
return
/**
* マスクレイヤーを表示
*/
関数
//マスクレイヤーの幅と高さは、それぞれページコンテンツの幅と高さです
$('.overlay'
'高さ':$(ドキュメント).高さ(),'幅':$(document).width()}); $('.overlay').show();
}
/**
* 読み込みプロンプトを表示
*/
関数 showLoading() {
//最初にマスクレイヤーを表示
showOverlay();
// ロードプロンプトウィンドウが中央に配置されます
$("#loadingTip").css('top',
(getWindowInnerHeight() - $("#loadingTip").height()) / 2 'px');
$("#loadingTip").css('left',
(getWindowInnerWidth() - $("#loadingTip").width()) / 2 'px');
"#loadingTip").show();
function() {
return false; });
}
* 読み込みプロンプトを非表示
*/
hideLoading() { $(
).hide(); $("#loadingTip"
$(document).scroll(function
return
true; }); }
/**
* ポップアップモーダルウィンドウ DIV をシミュレート
* @param innerHtml モーダルウィンドウ HTML コンテンツ
*/
関数 showModal(innerHtml) {
// シミュレーションモーダルウィンドウの表示に使用される DIV を取得します
var ダイアログ = $('#modalDiv' );
// 設定内容
// モーダルウィンドウ DIV ウィンドウが中央に配置されます
'top' : (getWindowInnerHeight() - Dialog.height()) / 2 'px' 、
'left' : (getWindowInnerWidth() - Dialog.width()) / 2 'px'
// ウィンドウ DIV の角丸
'.modal-container').css('border-radius', '6px');
Dialog.find(
).click(function(){ closeModal();
});
showOverlay();
ダイアログ.show();
}
* モーダルウィンドウを閉じるシミュレーション DIV
*/
closeModal() { $(
).hide(); $('#modalDiv'
$('#modalDiv'
''); }
body.html
XML/HTML コードコンテンツをクリップボードにコピー
1. >
2. <html lang="zh- CN「>
3. <頭>
4. <meta charset="utf- 8">
5. <メタ http-equiv=" X-UA-Compatible" コンテンツ="IE=edge">
6. <タイトル>本文页面タイトル>
7. <スタイルタイプ="text/ css">
8. * {
9. マージン: 0;
10. パディング: 0;
11. }
13. html, body {
14. 幅: 100%;
15. 高さ: 100%;
16. }
18. .outer {
19. 幅: 200px;
20. 高さ: 120px;
21. 位置: 相対。
22. トップ: 50%;
23. 左: 50%;
24. }
26. .inner {
27. 幅: 200px;
28. 高さ: 120px;
29. 位置: 相対。
30. トップ: -50%;
31. 左: -50%;
32. }
34. .button {
35. 幅: 200px;
36. 高さ: 40px;
37. 位置: 相対。
38. }
40. .button#btnShowLoading {
41. トップ: 0;
42. }
44. .button#btnShowModal {
45. トップ: 30%;
46. }
48. スタイル>
49. <スクリプト type="text/ javascript">
51. function showOverlay() {
52. // 親ウィンドウを呼び出してマスクレイヤと読み込みプロンプトを表示します
53. window.top.window.showLoading();
55. // タイマーを使用して、読み込みプロンプトを閉じることをシミュレートします
56. setTimeout(function() {
57. window.top.window.hideLoading();
58. }, 3000);
66. スクリプト>
67. 頭>
68. <ボディ>
69. <div class='outer' >
70. <div class='inner' >
71. <ボタン id='btnShowLoading' クラス='ボタン' onclick='showOverlay();'>クリックしてマスクレイヤーをポップアップ表示しますボタン>
72. <ボタン id='btnShowModal' クラス='ボタン' onclick='showModal();'>クリックしてモーダルウィンドウをポップアップしますボタン>
73. div>
74. div>
77. <div id='modalContent' スタイル='表示: なし;'>
78. <div class='modal-コンテナ' スタイル='幅: 100%;高さ: 100%;背景色: 白;'>
79. <div style='width: 100%;高さ: 49px;位置: 相対;左: 50%;上: 50%;'>
80. <スパンスタイル='font-サイズ: 36ピクセル; 幅: 100%; テキスト整列:中央; 表示: インラインブロック; 位置:継承; 左: -50%;上: -50%;'>模态窗口1スパン >
81. div>
82. <ボタンクラス='btn-閉じる' スタイル='width: 100px; 高さ: 30ピクセル; 位置: 絶対的; 右: 30ピクセル; 下: 20px;'>关闭ボタン>
83. div>
84. div>
85. <スクリプト type='text/ javascript' src="js/jquery-1.10.2.js"> スクリプト>
86. ボディ>
87. html>
运行結果：

初期化

显表示遮蔽罩层と読み込み中のヒント

显示遮蔽罩层和模拟弹出模态窗口

以上が本書のすべての内容であり、広く学術的に役立つことが期待されます。
翻訳：
http://www.cnblogs.com/haoqipeng/p/html-overlay.html