検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLでマスクレイヤーを実装する方法 HTML_HTML/Xhtml_Webページ制作でマスクレイヤーを使用する方法

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

WBOY
WBOYオリジナル
2016-05-16 16:45:591758ブラウズ

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

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

サンプルコード:

index.html

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

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

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：W3C推奨のモバイルWebマークアップ言語 XHTML Basic 1.1_HTML/Xhtml_Webページ制作次の記事：W3C推奨のモバイルWebマークアップ言語 XHTML Basic 1.1_HTML/Xhtml_Webページ制作

関連記事

続きを見る