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

推薦する

単一マシン上での Tomcat の複数インスタンスの実装

1. はじめにまず、1 台のマシンで複数のインスタンスを使用する理由という質問に答える必要があります...

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...

HTMLとCSSを使用して、自分だけの暖かい男「Dabai」を作成します

最終結果はこんな感じです、かわいいでしょう… PS: HTML と CSS の知識があればベストです...

MySQL テーブルの垂直分割と水平分割

垂直分割垂直分割とは、データテーブルの列を分割すること、つまり、多くの列を持つテーブルを複数のテーブ...

Dockerは複数のポートマッピングコマンドを有効にします

次のように： docker run -d -p 5000:23 -p 5001:22 --name ...

IOSデータベースアップグレードデータ移行の詳細な例

IOSデータベースアップグレードデータ移行の詳細な例まとめ：昔、データベースのバージョン アップグレ...

Vueは携帯電話のカメラとアルバムを呼び出す機能を実装します

この記事では、携帯電話のカメラとアルバムにアクセスするためのVueの具体的なコードを参考までに共有し...

Apple 電卓の JS 実装

この記事の例では、Appleの電卓を実装するためのJSの具体的なコードを参考までに共有しています。具...

モバイルプラットフォーム開発におけるメタタグの適用の詳細な説明

デスクトップ プラットフォームの Web レイアウトのメタ タグは誰もがよく知っています。これは常に...

Mac+IDEA+Tomcat の設定手順

目次1. ダウンロード2. インストールと解凍3. Tomcatを起動する4番目に、インストールが成...

CSS フロントエンドの知識ポイントのまとめ（必読）

1. CSS の概念: (カスケーディング スタイル シート)利点: 1. コンテンツとプレゼンテ...

Node.js で Bash スクリプトを書くための究極のソリューション

目次序文zxライブラリ$`コマンド` CD（）フェッチ（）質問（）寝る（）スローしない()チョークフ...

Vue+Vantはトップ検索バーを実装します

この記事では、参考までに、Vue+Vant のトップ検索バーを実装するための具体的なコードを紹介しま...

uniapp WeChatミニプログラムのグローバル共有を実装するためのサンプルコード

目次グローバル共有コンテンツファイルを作成するファイルをインポートしてグローバルに登録するページ共有...

VueはPCで写真をアップロードする機能を実現

この記事の例では、PC上で写真アップロード機能を実現するためのVueの具体的なコードを参考までに共有...