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 の計算プロパティとプロパティリスニングについての簡単な説明

推薦する

Docker で TLS と CA 認証を有効にする方法

目次1. 証明書を生成する2. リモートを有効にする3. リモート接続3.1 Jenkins接続3....

React コンポーネントのコンストラクタとスーパーの知識ポイントのまとめ

1. Reactでクラス宣言する際のヒント 上記のように、Child クラスは class キーワー...

Vue ソースコード学習でレスポンシブ性を実装する方法

目次序文1. レスポンシブシステムの重要な要素1. データの変更を監視する方法2. 依存関係を収集す...

非常に詳細な MySQL8.0.22 のインストールと設定のチュートリアル

みなさんこんにちは。今日は、MySQL 8.0.22 のインストールと構成について学習します。注意深...

MySQLクエリ最適化プロセスを理解する

目次パーサーとプリプロセッサクエリオプティマイザーMySQL クエリの最適化には、解析、前処理、最適...

マスタークラスタに再参加する k8s ノードの実装

1. ノードを削除するkubectl delete node node01を実行します。 2. この...

あまり多くのコードを書かずに、ハイパーリンクを使ってシンプルで美しいカスタムチェックボックスを実装できます。

今日ふと、HTML でチェックボックスのスタイルを変更できる範囲が限られていることと、チェックボック...

iframe に関するいくつかの発見と考察

この物語は、今日の予期せぬ発見から始まります。同社には複数のウェブサイトがある。友達リンクにはお互い...

docker compose デプロイメントにおけるマスタースレーブレプリケーションの実装

目次構成解析サービス構築ディレクトリ構造ファイルを作成インスタンス構成サービスを開始するテストRed...

MySQL で sum 関数を使用する例のチュートリアル

導入今日は、MySQL の sum 関数の使い方を紹介します。この関数は、MySQL データベースを...

中国語フォントの英語名まとめ

CSS の font-family プロパティを使用して中国語フォントを参照する場合、フォントを定義...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...

CentOS7 で jar アプリケーションの起動を設定する方法

プロジェクトの展開中に遭遇した落とし穴Zhihudemo を展開する際、Jenkins などの自動展...

MySQL 8.0 アップグレード体験

目次序文1. まず、既存のバージョンの MySQL を完全にアンインストールします。 2. deb ...

HTML テーブルタグチュートリアル (33): セルの垂直配置属性 VALIGN

垂直方向では、セルの配置を上、中央、下に設定できます。基本的な構文<TD VLIGN=&quo...