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

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

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

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

サンプルコード:

インデックス.html

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "zh-CN" >   
  3. <ヘッド>   
  4. <メタ 文字セット= "utf-8" >   
  5. <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=edge" >   
  6. < title > HTML マスク レイヤー</ title >   
  7. <リンク  rel = "スタイルシート"   href = "css/index.css" >   
  8. </ヘッド>   
  9. <本文>   
  10.      < div  クラス= "ヘッダー"   id = "ヘッダー" >   
  11.          < div  クラス= "タイトル外側" >   
  12.              <スパン クラス= "タイトル" >   
  13. HTML マスク レイヤーの使用
  14.              </スパン>   
  15.          </div>​​   
  16.      </div>​​   
  17.      < div  クラス= "body"   id = "本文" >   
  18.          <インラインフレーム  id = "iframeRight"  名前= "iframeRight"  幅= "100%"  高さ= "100%"   
  19.             スクロール= "いいえ"  フレームボーダー= "0"   
  20.              style = "境界線: 0px;余白: 0px;パディング: 0px;幅: 100%;高さ: 100%;オーバーフロー: 非表示;"   
  21.              onload = "rightIFrameLoad(this)"   src = "body.html" > </ iframe >   
  22.      </div>​​   
  23.        
  24.      <!-- マスクレイヤー DIV -->   
  25.      < div   id = "オーバーレイ"  クラス= "オーバーレイ" > </ div >   
  26.      <!-- プロンプト DIV を読み込んでいます -->   
  27.      < div   id = "読み込み中のヒント"  クラス= "読み込みのヒント" >   
  28.          <画像  src = "images/loading.gif"   />   
  29.      </div>​​   
  30.        
  31.      <!-- モーダルウィンドウの DIV をシミュレート -->   
  32.      < div  クラス= "モーダル"   id = "modalDiv" > </ div >   
  33.        
  34.      <スクリプト タイプ= 'text/javascript'   src = "js/jquery-1.10.2.js" > </スクリプト>   
  35.      <スクリプト タイプ= "テキスト/javascript"   src = "js/index.js" > </スクリプト>   
  36. </本文>   
  37. </html>​​   

インデックス.css

CSSコードコンテンツをクリップボードにコピー
  1. * {
  2.     マージン:0;
  3.     パディング: 0;
  4. }
  5.   
  6. html、本文{
  7.     幅: 100%;
  8.     高さ: 100%;
  9.     フォントサイズ: 14px ;
  10. }
  11.   
  12. div.ヘッダー{
  13.     幅: 100%;
  14.     高さ: 100px ;
  15.     下ボーダー: 1px  破線 青;
  16. }
  17.   
  18. div.title-outer {
  19.     位置:相対的;
  20.     上位：50%
  21.     高さ: 30px ;
  22. }
  23. span.title {
  24.     テキスト配置:左;
  25.     位置:相対的;
  26.     左：3％
  27.     上: -50%;
  28.     フォントサイズ: 22px ;
  29. }
  30.   
  31. div.body {
  32.     幅: 100%;
  33. }
  34. 。かぶせる {
  35.     位置:絶対;
  36.     上: 0px ;
  37.     左: 0px ;
  38.      zインデックス: 10001;
  39.     表示:なし;
  40. フィルター:アルファ(不透明度=60);
  41.     背景色: #777 ;
  42. 不透明度: 0.5;
  43. -moz-不透明度: 0.5;
  44. }
  45. .読み込みヒント {
  46.      zインデックス: 10002;
  47.     位置：固定;
  48.     表示:なし;
  49. }
  50. .loading-tip 画像 {
  51.     幅: 100px ;
  52.     高さ: 100px ;
  53. }
  54.   
  55. .モーダル{
  56.     位置:絶対;
  57.     幅: 600px ;
  58.     高さ: 360px ;
  59.     境界線: 1ピクセル ソリッドrgba(0, 0, 0, 0.2);
  60. ボックスシャドウ: 0px   3ピクセル  9px RGBA(0, 0, 0, 0.5);
  61.     表示:なし;
  62.      zインデックス: 10003;
  63.     境界線-半径: 6px ;
  64. }
  65.   

インデックス

JavaScriptコードコンテンツをクリップボードにコピー
  1. 関数rightIFrameLoad(iframe) {
  2.      var pHeight = getWindowInnerHeight() - $( '#header' ).height() - 5;
  3.        
  4. $( 'div.body' ).height(pHeight);
  5. コンソールにログ出力します。
  6.        
  7. }
  8.   
  9. // ブラウザの互換性 ブラウザの表示領域の高さを取得します  
  10. 関数getWindowInnerHeight() {
  11.      var winHeight = window.innerHeight
  12. || (document.documentElement && document.documentElement.clientHeight)
  13. document.body のクライアントの高さを設定します。
  14.      winHeightを返します。
  15.        
  16. }
  17.   
  18. // ブラウザの互換性 ブラウザの表示領域の幅を取得します  
  19. 関数getWindowInnerWidth() {
  20.      var winWidth = window.innerWidth
  21. || (document.documentElement && document.documentElement.clientWidth)
  22. || (document.body && document.body.clientWidth);
  23.      winWidthを返します。
  24.        
  25. }
  26.   
  27. /**
  28. * マスクレイヤーを表示
  29. */   
  30. 関数showOverlay() {
  31.      // マスクレイヤーの幅と高さはページコンテンツの幅と高さです  
  32. $( '.overlay' ).css({ 'height' :$(document).height(), 'width' :$(document).width()});
  33. $( '.overlay' ).show();
  34. }
  35.   
  36. /**
  37. * 読み込みプロンプトを表示する
  38. */   
  39. 関数showLoading() {
  40.      // 最初にマスクレイヤーを表示する  
  41. オーバーレイを表示します。
  42.      // 読み込みプロンプトウィンドウが中央に配置されます  
  43. $( "#loadingTip" ).css( 'top' ,
  44. (getWindowInnerHeight() - $( "#loadingTip" ).height()) / 2 + 'px' );
  45. $( "#loadingTip" ).css( 'left' ,
  46. (getWindowInnerWidth() - $( "#loadingTip" ).width()) / 2 + 'px' );
  47.                
  48. $( "#loadingTip" ).show();
  49. $(document).scroll(関数() {
  50.         戻る 間違い;
  51. });
  52. }
  53.   
  54. /**
  55. * 読み込みプロンプトを非表示
  56. */   
  57. 関数hideLoading() {
  58. $( '.overlay' ).hide();
  59. $( "#loadingTip" ).hide();
  60. $(document).scroll(関数() {
  61.         戻る 真実;
  62. });
  63. }
  64.   
  65. /**
  66. * ポップアップモーダルウィンドウDIVをシミュレートする
  67. * @param innerHtml モーダルウィンドウの HTML コンテンツ
  68. */   
  69. 関数showModal(innerHtml) {
  70.      // シミュレートされたモーダルウィンドウを表示するために使用する DIV を取得します  
  71.      varダイアログ = $( '#modalDiv' );
  72.        
  73.      //コンテンツを設定する  
  74. ダイアログ.html(内部HTML);
  75.        
  76.      //モーダルウィンドウのDIVウィンドウを中央に配置する  
  77. ダイアログ.css({
  78.          'top' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px' 、
  79.          '左' : (getWindowInnerWidth() - dialog.width()) / 2 + 'px'   
  80. });
  81.        
  82.      // ウィンドウ DIV 丸い角  
  83. dialog.find( '.modal-container' ).css( 'border-radius' , '6px' );
  84.        
  85.      // モーダルウィンドウの閉じるボタンイベント  
  86. dialog.find( '.btn-close' ).click(関数(){
  87. モーダルを閉じる();
  88. });
  89.        
  90.      // マスクレイヤーを表示する  
  91. オーバーレイを表示します。
  92.        
  93.      // マスクレイヤーを表示する  
  94. ダイアログを表示します。
  95. }
  96.   
  97. /**
  98. * モーダルウィンドウのDIVを閉じることをシミュレートする
  99. */   
  100. 関数closeModal() {
  101. $( '.overlay' ).hide();
  102. $( '#modalDiv' ).hide();
  103. $( '#modalDiv' ).html( '' );
  104. }

本文.html

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html >   
  2. < html   lang = "zh-CN" >   
  3. <ヘッド>   
  4. <メタ 文字セット= "utf-8" >   
  5. <メタ  http-equiv = "X-UA 互換"  コンテンツ= "IE=edge" >   
  6. <タイトル>本文</タイトル>   
  7. <スタイル タイプ= "text/css" >   
  8. * {
  9. マージン: 0;
  10. パディング: 0;
  11. }
  12.   
  13. html、本文{
  14. 幅: 100%;
  15. 高さ: 100%;
  16. }
  17.   
  18. .外側{
  19. 幅: 200ピクセル;
  20. 高さ: 120px;
  21. 位置: 相対的;
  22. 上位: 50%;
  23. 左: 50%;
  24. }
  25.   
  26. .インナー{
  27. 幅: 200ピクセル;
  28. 高さ: 120px;
  29. 位置: 相対的;
  30. 上: -50%;
  31. 左: -50%;
  32. }
  33.   
  34. 。ボタン {
  35. 幅: 200ピクセル;
  36. 高さ: 40px;
  37. 位置: 相対的;
  38. }
  39.     
  40. .button#btn読み込み中を表示{
  41. 上: 0;
  42. }
  43.   
  44. .button#btnモーダル表示 {
  45. 上位: 30%
  46. }
  47.   
  48. </スタイル>   
  49. <スクリプト タイプ= "text/javascript" >   
  50.        
  51. 関数 showOverlay() {
  52. // 親ウィンドウを呼び出してマスクレイヤーと読み込みプロンプトを表示します
  53. ウィンドウの上部に読み込みを表示します。
  54.   
  55. // タイマーを使用して読み込みプロンプトを閉じることをシミュレートします
  56. setTimeout(関数() {
  57. ウィンドウの上部にウィンドウを非表示にする();
  58. }, 3000);
  59.   
  60. }
  61.   
  62. 関数 showModal() {
  63. //ポップアップモーダルウィンドウをシミュレートするために親ウィンドウメソッドを呼び出す
  64. ウィンドウの上部にモーダルを表示します($('#modalContent').html());
  65. }
  66.        
  67. </スクリプト>   
  68. </ヘッド>   
  69. <本文>   
  70.      < div  クラス= '外側' >   
  71.          < div  クラス= 'inner' >   
  72.              <ボタン  id = 'btnShowLoading'  クラス= 'ボタン'   onclick = 'showOverlay();' >クリックするとオーバーレイレイヤーがポップアップします</ button >   
  73.              <ボタン  id = 'btnShowModal'  クラス= 'ボタン'   onclick = 'showModal();' >クリックするとモーダルウィンドウが表示されます</ button >   
  74.          </div>​​   
  75.      </div>​​   
  76.        
  77.      <!-- モーダル ウィンドウ コンテンツ DIV、このページの DIV コンテンツを親ウィンドウ DIV に設定し、モーダルに表示します -->   
  78.      < div   id = 'モーダルコンテンツ'  スタイル= '表示: なし;' >   
  79.          < div  クラス= 'モーダルコンテナ'  スタイル= '幅: 100%;高さ: 100%;背景色: 白;' >   
  80.              < div  スタイル= '幅: 100%;高さ: 49px;位置: 相対;左: 50%;上: 50%;' >   
  81.                  <スパン  style = 'font-size: 36px; width: 100%; text-align:center; display: inline-block; position:inherit; left: -50%;top: -50%;' >モーダルウィンドウ 1 </ span >   
  82.              </div>​​   
  83.              <ボタン クラス= 'btn-close'   style = '幅: 100px; 高さ: 30px; 位置: absolute; 右: 30px; 下: 20px ; ' >閉じる</button>   
  84.          </div>​​   
  85.      </div>​​   
  86.      <スクリプト タイプ= 'text/javascript'   src = "js/jquery-1.10.2.js" > </スクリプト>   
  87. </本文>   
  88. </html>​​   
  89.   

実行結果:

初期化

マスクレイヤーと読み込みプロンプトを表示する

マスクレイヤーを表示し、ポップアップモーダルウィンドウをシミュレートします

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。

原文: http://www.cnblogs.com/haoqipeng/p/html-overlay.html

<<:  重要なmysqlログファイルの概要

>>:  Vue の計算プロパティとプロパティリスニングについての簡単な説明

推薦する

React Hook の使用例 (一般的なフック 6 つ)

1. useState: 関数コンポーネントに状態を持たせる使用例: // カウンター impor...

シェルスクリプトは、Docker の半自動コンパイル、パッケージ化、およびリリースアプリケーション操作を構築します。

Docker 公開方法は、DevOps (送信、コンパイル、パッケージ化、リリースなどの一連のイベ...

MySQL挿入パフォーマンスを最適化する方法の例

MySQL パフォーマンスの最適化MySQL パフォーマンスの最適化とは、リソースを合理的に配置し、...

Docker のコンテナ データ ボリュームの概要

目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...

CSSアニメーション効果アニメーションの一般的なスタイル

アニメーションアニメーションを定義します。 /*アニメーションの各ステップで実行されるアクションを定...

geo モジュールを使用して Nginx でホワイトリストを設定する例

元の構成: http { ...... limit_conn_zone $binary_remote...

CentOS6.5にpython3.7をインストールする詳細な手順

1. Python 3をダウンロードする https://www.python.org/ftp/py...

awk でのループの使用

同じコマンドを複数回実行するさまざまな種類のループについて学習しましょう。 awk スクリプトには、...

Windows Server 2008 64ビット MySQL5.6 インストール不要版 設定方法図

1 公式ウェブサイトから MySQL 5.6 バージョンの圧縮パッケージmysql-5.6.36-w...

W3C標準に準拠したHTML標準で注意すべき点を詳細に解説

XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE html PUB...

Bash スクリプトでの配列メソッドの作成と使用の概要

Bashで配列を定義するbash スクリプトで新しい配列を作成する方法は 2 つあります。 1 つ目...

MySQL 全体または単一のテーブルデータのエクスポート

単一のテーブルをエクスポートするmysqldump -u ユーザー -p db名 テーブル名 >...

XHTMLタグは適切に使用する必要があります

<br />123WORDPRESS.COM の以前のチュートリアルでは、Web ページ...

MySQLバイナリログを介してデータベースデータを復元する方法の詳細な説明

ウェブサイト管理者は、さまざまな理由や操作により、ウェブサイトのデータを誤って削除したり、ウェブサイ...

MySQL 1130例外、リモートログインできない解決策

目次質問： 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...