suchen

Heim >Web-Frontend >HTML-Tutorial >So implementieren Sie eine Maskenebene in HTML. So verwenden Sie eine Maskenebene bei der Erstellung von HTML_HTML/Xhtml_Webseiten

So implementieren Sie eine Maskenebene in HTML. So verwenden Sie eine Maskenebene bei der Erstellung von HTML_HTML/Xhtml_Webseiten

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:45:591765Durchsuche

Durch die Verwendung einer Maskenebene in Webseiten können wiederholte Vorgänge verhindert und das Laden beschleunigt werden. Außerdem können modale Popup-Fenster simuliert werden.

Implementierungsidee: Ein DIV dient als Maskenebene und ein DIV zeigt das ladende dynamische GIF-Bild an. Im folgenden Beispielcode wird auch gezeigt, wie die Ebene der Anzeige- und Ausblendmaske auf der Iframe-Unterseite aufgerufen wird.

Beispielcode:

index.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html lang="zh- CN">  
  3. <Kopf>  
  4. <meta charset="utf- 8">  
  5. <meta http-equiv=" X-UA-kompatibel" Inhalt="IE=edge">  
  6. <title>HTML遮罩层Titel>  
  7. <link rel="stylesheet"  href="css/index.css">  
  8. Kopf>  
  9. <Körper>  
  10.     <div class="header"  id="header">  
  11.         <div class="title- außen">  
  12.             <span class="title" >  
  13.                 HTML遮罩层使用   
  14.             span>  
  15.         div>  
  16.     div>  
  17.     <div class="body"  id="body">  
  18.         <iframe id="iframeRight"  name="iframeRight" width="100%" Höhe="100%"  
  19.             Scrollen="Nein" Rahmenrand="0"  
  20.             Stil="border: 0px;margin: 0px; padding: 0px; width: 100%; height: 100%;overflow : hidden;"  
  21.             onload="rightIFrameLoad(this)" src="body.html">iframe>  
  22.     div>  
  23.        
  24.       
  25.     <div id="overlay"  class="overlay">div>  
  26.       
  27.     <div id="loadingTip"  class="loading-tip">  
  28.         <img src="images/ Loading.gif" />  
  29.     div>  
  30.        
  31.       
  32.     <div class="modal"  id="modalDiv">div>  
  33.        
  34.     <script type='text/ javascript' src="js/jquery-1.10.2.js"> Skript>  
  35.     <Skript Typ="text/ javascript" src="js/index.js">< ;/Skript>  
  36. Körper>  
  37. html>  

index.css

CSS-Code复制内容到剪贴板
  1. * {   
  2.     Marge: 0;   
  3.     Auffüllung: 0;   
  4. }   
  5.   
  6. html, body {   
  7.     Breite: 100 %;   
  8.     Höhe: 100 %;   
  9.     Schriftgröße: 14px;   
  10. }   
  11.   
  12. div.header {   
  13.     Breite: 100 %;   
  14.     Höhe: 100px;   
  15.     border-bottom: 1px gestrichelt blau;   
  16. }   
  17.   
  18. div.title-outer {   
  19.     Position: relativ;   
  20.     oben: 50 %;   
  21.     Höhe: 30px;   
  22. }   
  23. span.title {   
  24.     Textausrichtung: links;   
  25.     Position: relativ;   
  26.     links: 3 %;   
  27.     oben: -50 %;   
  28.     Schriftgröße: 22px;   
  29. }   
  30.   
  31. div.body {   
  32.     Breite: 100 %;   
  33. }   
  34. .overlay {   
  35.     Position: absolut;   
  36.     oben: 0px;   
  37.     links: 0px;   
  38.     z-index: 10001;   
  39.     Anzeige:keine;   
  40.     filter:alpha(opacity=60);   
  41.     Hintergrundfarbe: #777;   
  42.     Deckkraft: 0,5;   
  43.     -moz-opacity: 0,5;   
  44. }  
  45. .loading-tip {   
  46.     z-index: 10002;   
  47.     Position: fest;   
  48.     Anzeige:keine;   
  49. }   
  50. .loading-tip img {   
  51.     Breite:100px;   
  52.     Höhe:100px;   
  53. }   
  54.   
  55. .modal {   
  56.     Position:absolut;   
  57.     Breite: 600px;   
  58.     Höhe: 360px;   
  59.     Rahmen: 1px fest rgba(0, 0, 0, 0,2);   
  60.     box-shadow: 0px 3px 9px rgba (0, 0, 0, 0,5);   
  61.     Anzeige: keine;   
  62.     z-index: 10003;   
  63.     Rahmen-Radius: 6px;   
  64. }   
  65.   

index.js

JavaScript-Code复制内容到剪贴板
  1. Funktion rightIFrameLoad(iframe) {
  2.  var pHeight = getWindowInnerHeight() - $('#header').height() - 5 ;
  3.  
  4. $('div.body').height(pHeight);
    5. console.log(pHeight);
    6.  
    7. }
  9. // Browser-Kompatibilität Ermitteln Sie die Höhe des Browser-Ansichtsfensters
  10. Funktion getWindowInnerHeight() {
  11. var winHeight = window.innerHeight
    12. ||. (document.documentElement && document.documentElement.clientHeight)
    13. ||. (document.body && document.body.clientHeight);
    14. return
  14. winHeight;  
    15. }
  17. // Browserkompatibilität Ermitteln Sie die Breite des Browser-Ansichtsfensters
  18. Funktion
    19. getWindowInnerWidth() {
  19. var
    20. winWidth = window.innerWidth
  20. ||. (document.documentElement && document.documentElement.clientWidth)
    21. ||. (document.body && document.body.clientWidth);
    22. return
  22. winWidth;
    23.  
  23. }
  25. /**
  26. * Maskenebene anzeigen
  27. */
  29. Funktion showOverlay() {
  30. //Die Breite und Höhe der Maskenebene entsprechen der Breite bzw. Höhe des Seiteninhalts
    31. $(
  31. '.overlay').css({'height'
    32. :$(document). height(),
  32. 'width':$(document).width()}); $('.overlay').show( }
  34. /**
  35. * Ladeaufforderung anzeigen
  36. */
  37. Funktion showLoading() {
  38. //Zeigen Sie zuerst die Maskenebene an
  39. showOverlay();
  40. // Das Fenster mit der Ladeaufforderung ist zentriert
  41. $("#loadingTip").css('top',
  42. (getWindowInnerHeight() - $("#loadingTip").height()) / 2 'px');
  43. $("#loadingTip").css('left',
  44. (getWindowInnerWidth() - $("#loadingTip").width()) / 2 'px');
  45.                                                         
    46. $(
  46. "#loadingTip").show();
    47. $(document).scroll(
  47. function() {
  48. return false; });
  49. }
    52. /**
  52. * Ladeaufforderung ausblenden
  53. */
    55. Funktion
  55. hideLoading() { $(
    56. '.overlay'
  56. ).hide( $(
    57. "#loadingTip"
  57. ).hide( $(document).scroll(
    58. function
  58. () {
    59. zurück
  59. wahr; });
    60. }
  61. /**
  62. * Simulieren Sie das modale Popup-Fenster DIV
  63. * @param innerHtml modales Fenster HTML-Inhalt
  64. */
  65. Funktion showModal(innerHtml) {
  66. // Holen Sie sich den DIV, der zum Anzeigen des modalen Simulationsfensters verwendet wird
  67. var dialog = $('#modalDiv');
  68.  
  69. // Inhalt festlegen
  70. dialog.html(innerHtml);
  71.  
  72. // Modales Fenster DIV-Fenster ist zentriert
  73. dialog.css({
  74.  'top' : (getWindowInnerHeight() - dialog.height()) / 2 'px' ,
  75.  'left' : (getWindowInnerWidth() - dialog.width()) / 2 'px'
  76. });
  77.  
  78. // Fenster DIV abgerundete Ecken
  79. Dialog.find('.modal-container').css('border-radius', '6px');
  80.  
  81. // Modales Fenster-Schaltflächen-Ereignis
  82. dialog.find('.btn-close').click(function(){
  83. closeModal();
  84. });
  85.  
  86. //Maskenebene anzeigen
  87. showOverlay();
  88.  
  89. //Maskenebene anzeigen
  90. dialog.show();
  91. }
  93. /**
  94. * Simulieren Sie das Schließen des modalen Fensters DIV
  95. */
  96. Funktion closeModal() {
  97. $('.overlay').hide(
  98. $('#modalDiv').hide();
  99. $('#modalDiv').html('');
  100. }

body.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. >  
  2. <html lang="zh- CN">  
  3. <Kopf>  
  4. <meta charset="utf- 8">  
  5. <meta http-equiv=" X-UA-kompatibel" Inhalt="IE=edge">  
  6. <title>body 页面Titel>  
  7. <Stil Typ="text/ css">  
  8. * {   
  9.     Rand: 0;   
  10.     padding: 0;   
  11. }   
  12.   
  13. html, body {   
  14.     Breite: 100 %;   
  15.     Höhe: 100 %;   
  16. }   
  17.   
  18. .outer {   
  19.     Breite: 200px;   
  20.     Höhe: 120px;   
  21.     Position: relativ;   
  22.     oben: 50 %;   
  23.     links: 50 %;   
  24. }   
  25.   
  26. .inner {   
  27.     Breite: 200px;   
  28.     Höhe: 120px;   
  29.     Position: relativ;   
  30.     oben: -50 %;   
  31.     links: -50 %;   
  32. }   
  33.   
  34. .button {   
  35.     Breite: 200px;   
  36.     Höhe: 40px;   
  37.     Position: relativ;   
  38. }   
  39.     
  40. .button#btnShowLoading {   
  41.     oben: 0;   
  42. }   
  43.   
  44. .button#btnShowModal {   
  45.     oben: 30 %;   
  46. }
  48. Stil>
  49. <Skript Typ="text/ Javascript">
  50.  
  51. Funktion showOverlay() {
  52. // Rufen Sie das übergeordnete Fenster auf, um die Maskenebene und die Ladeaufforderungen anzuzeigen
  53. window.top.window.showLoading();
  55. // Verwenden Sie einen Timer, um das Schließen der Ladeaufforderung zu simulieren
  56. setTimeout(function() {
  57. window.top.window.hideLoading();
  58. }, 3000);
  60. }
  62. Funktion showModal() {
  63. // Rufen Sie die übergeordnete Fenstermethode auf, um ein modales Popup-Fenster zu simulieren
  64. window.top.showModal($('#modalContent').html());
  65. }
  66.  
  67. Skript>
  68. Kopf>
  69. <Körper>
  70.  <div class='outer' >
  71.  <div class='inner' >
  72.  <Schaltfläche id='btnShowLoading' class='button' onclick='showOverlay();'>Klicken Sie, um die Maskenebene einzublendenSchaltfläche>
  73.  <Schaltfläche id='btnShowModal' class='button' onclick='showModal();'>Klicken Sie, um das modale Fenster zu öffnenSchaltfläche>
  74. div>
  75.  div> 
  76.  
  78.  <div id='modalContent' Stil='display: none;'>
  79.  <div class='modal- Container' style='width: 100%;height: 100%;background-color: white;'>
  80.  <div style='width: 100%;Höhe: 49px;Position: relativ;links: 50%;oben: 50%;'>
  81.                 Größe: 36px; Breite: 100 %; text-align:center; display: inline-block; Position: erben; left: -50%;top: -50%;'>模态窗口1span >               div>  
  82.             <Schaltfläche Klasse
    83. =
  83. 'btn- close' style='width: 100px; Höhe: 30px; Position: absolut; rechts: 30px; unten: 20px;'>关闭Schaltfläche>         div>  
  84.     div>  
  85.     <script type
    86. =
  86. 'text/ javascript' src="js/jquery-1.10.2.js"> Skript>   Körper>  
  87. html>  
  88.    运行结果：
    89. 初始化
显示遮罩层和Laden提示

显示遮罩层和模拟弹出模态窗口

以上就是本文的全部内容,希望对大家的学习有所帮助.

原文：

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Vom W3C empfohlene mobile Web-Auszeichnungssprache XHTML Basic 1.1_HTML/Xhtml_WebseitenproduktionNächster Artikel：Vom W3C empfohlene mobile Web-Auszeichnungssprache XHTML Basic 1.1_HTML/Xhtml_Webseitenproduktion

In Verbindung stehende Artikel

Mehr sehen