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

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

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

サンプルコード:

index.html

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

1. /span>>
2. html lang="zh- CN「>
3. 頭>
4. meta charset="utf- 8">
5. メタ http-equiv=" X-UA-Compatible" コンテンツ="IE=edge">
6. タイトル>HTML遮蔽罩层タイトル>
7. リンク rel="スタイルシート" href="css/index.css">
8. 頭>
9. ボディ>
10. div class="ヘッダー" id="ヘッダー">
11. div class="title-外側">
12. スパン クラス="タイトル" >
13. HTML遮蔽罩层使用
14. スパン>
15. div>
16. div>
17. div class="body" id="body">
18. iframe id="iframeRight" 名前="iframeRight" 幅="100%" 身長="100%"
19. スクロール=「いいえ」 frameborder="0"
20. style="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow : 非表示;"
21. onload="rightIFrameLoad(this)" src="body.html">iframe>
22. div>
25. div id="オーバーレイ" クラス="オーバーレイ">div>
27. div id="loadingTip" クラス="loading-tip">
28. img src="images/ reading.gif" />
29. div>
32. div class="モーダル" id="modalDiv">div>
34. スクリプト type='text/ javascript' src="js/jquery-1.10.2.js"> スクリプト>
35. スクリプト type="text/ javascript" src="js/index.js">< ;/スクリプト>
36. ボディ>
37. html>

index.css

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

1. * {
2. マージン: 0;   
3. パディング: 0;   
4. }
6. html, body {
7. 幅: 100%;   
8. 身長: 100%;   
9. フォントサイズ: 14px;   
10. }
12. div.header {
13. 幅: 100%;   
14. 高さ: 100px;   
15. ボーダー下: 1px 破線 青;   
16. }
18. div.title-outer {
19. 位置: 相対;   
20. トップ: 50%;   
21. 高さ: 30px;   
22. }
23. span.title {
24. text-align: left;   
25. 位置: 相対;   
26. 左: 3%;   
27. トップ: -50%;   
28. フォントサイズ: 22px;   
29. }
31. div.body {
32. 幅: 100%;   
33. }
34. .overlay {
35. 位置: 絶対;   
36. トップ: 0px;   
37. 左: 0px;   
38. z-index: 10001;   
39. 表示:なし;   
40. フィルター:alpha(opacity=60);   
41. 背景色: #777;   
42. 不透明度: 0.5;   
43. -moz-opacity: 0.5;   
44. }  
45. .loading-tip {
46. z-index: 10002;   
47. 位置: 固定;   
48. 表示:なし;   
49. }
50. .loading-tip img {
51. 幅:100px;   
52. 高さ:100px;   
53. }
55. .modal {
56. 位置:絶対;   
57. 幅: 600px;   
58. 高さ: 360px;   
59. ボーダー: 1px solid rgba(0, 0、0、0.2）;   
60. box-shadow: 0px 3px 9px rgba (0, 0, 0, 0.5);   
61. 表示: なし;   
62. z-index: 10003;   
63. ボーダー-半径: 6px;   
64. }

index.js

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

1. 関数 rightIFrameLoad(iframe) {
2. var pHeight = getWindowInnerHeight() - $('#header').height() - 5 ;
4. $('div.body').height(pHeight);
console.log(pHeight);
}
9. // ブラウザの互換性 ブラウザのビューポートの高さを取得します
10. 関数 getWindowInnerHeight() {
11. var winHeight = window.innerHeight
|| (document.documentElement && document.documentElement.clientHeight)
|| (document.body && document.body.clientHeight);
return
14. winHeight;
15. }
// ブラウザの互換性 ブラウザのビューポート幅を取得
関数
19. getWindowInnerWidth() {
var
20. winWidth = window.innerWidth || (document.documentElement && document.documentElement.clientWidth)
21. || (document.body && document.body.clientWidth);
22. return
winWidth;
}
26. /**
27. * マスクレイヤーを表示
28. */
29. 関数
showOverlay() {
30. //マスクレイヤーの幅と高さは、それぞれページコンテンツの幅と高さです
31. $('.overlay'
).css({
32. '高さ':$(ドキュメント).高さ(),'幅':$(document).width()}); $('.overlay').show();
33. }
35. /**
36. * 読み込みプロンプトを表示
37. */
38. 関数 showLoading() {
39. //最初にマスクレイヤーを表示
40. showOverlay();
41. // ロードプロンプトウィンドウが中央に配置されます
42. $("#loadingTip").css('top',
43. (getWindowInnerHeight() - $("#loadingTip").height()) / 2 'px');
44. $("#loadingTip").css('left',
45. (getWindowInnerWidth() - $("#loadingTip").width()) / 2 'px');
$(
47. "#loadingTip").show();
$(document).scroll(
48. function() {
49. return false; });
50. }
/**
53. * 読み込みプロンプトを非表示
54. */
function
56. hideLoading() { $(
'.overlay'
57. ).hide(); $("#loadingTip"
).hide();
58. $(document).scroll(function
() {
59. return
60. true; }); }
62. /**
63. * ポップアップモーダルウィンドウ DIV をシミュレート
64. * @param innerHtml モーダル ウィンドウ HTML コンテンツ
65. */
66. 関数 showModal(innerHtml) {
67. // シミュレーションモーダルウィンドウの表示に使用される DIV を取得します
68. var ダイアログ = $('#modalDiv' );
70. // 設定内容
ダイアログ.html(innerHtml);
73. // モーダルウィンドウ DIV ウィンドウが中央に配置されます
Dialog.css({
75. 'top' : (getWindowInnerHeight() - Dialog.height()) / 2 'px' 、
76. 'left' : (getWindowInnerWidth() - Dialog.width()) / 2 'px'
});
79. // ウィンドウ DIV の角丸
Dialog.find(
80. '.modal-container').css('border-radius', '6px');
// モーダルウィンドウ閉じるボタンイベント
82. Dialog.find(
'.btn-close'
83. ).click(function(){ closeModal();
84. });
//マスクレイヤーを表示
87. showOverlay();
//マスクレイヤーを表示
90. ダイアログ.show();
91. }
/**
94. * モーダルウィンドウを閉じるシミュレーション DIV
95. */
関数
97. closeModal() { $(
'.overlay'
98. ).hide(); $('#modalDiv'
).hide();
99. $('#modalDiv'
).html(
100. ''); }

     body.html

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

     1. /span>>
     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);
     }
     function showModal() {
     // 親ウィンドウ メソッドを呼び出して、ポップアップ モーダル ウィンドウをシミュレートします
     window.top.showModal($('#modalContent').html());
     }
     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