So implementieren Sie eine Maskenebene in HTML So verwenden Sie eine Maskenebene in HTML

So implementieren Sie eine Maskenebene in HTML So verwenden Sie eine Maskenebene in HTML

Die Verwendung von Maskenebenen in Webseiten kann wiederholte Vorgänge und schnelles Laden verhindern; außerdem können damit modale Popup-Fenster simuliert werden.

Implementierungsidee: Ein DIV wird als Maskenebene verwendet und ein DIV zeigt ein geladenes dynamisches GIF-Bild an. Der folgende Beispielcode zeigt außerdem, wie die Anzeige und Ausblendung der Maskenebene in der Iframe-Unterseite aufgerufen wird.

Beispielcode:

Hauptseite

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html   lang = "zh-CN" >   
  3. <Kopf>​​   
  4. < Meta   Zeichensatz = "utf-8" >   
  5. < Meta   http-equiv = "X-UA-kompatibel"   Inhalt = "IE=edge" >   
  6. < Titel > HTML-Maskenebene </ Titel >   
  7. < Link   rel = "Stilvorlage"   href = "css/index.css" >   
  8. </ Kopf >   
  9. < Textkörper >   
  10.      < div   Klasse = "Header"   id = "Kopfzeile" >   
  11.          < div   Klasse = "Titel-Außen" >   
  12.              < Spanne   Klasse = "Titel" >   
  13. Verwendung der HTML-Maskenebene
  14.              </ span >   
  15.          </div>​​   
  16.      </div>​​   
  17.      < div   Klasse = "Körper"   id = "Körper" >   
  18.          < iframe   id = "iframeRechts"   Name = "iframeRechts"   Breite = "100 %"   Höhe = "100 %"   
  19.              scrollen = "nein"   Rahmenrand = "0"   
  20.              Stil = "Rand: 0px; Rand: 0px; Polsterung: 0px; Breite: 100 %; Höhe: 100 %; Überlauf: ausgeblendet;"   
  21.              onload = "rightIFrameLoad(dies)"   src = "body.html" > </ iframe >   
  22.      </div>​​   
  23.        
  24.      <!-- Maskenebene DIV -->   
  25.      < div   id = "Überlagerung"   Klasse = "Overlay" > </ div >   
  26.      <!-- Ladeaufforderung DIV -->   
  27.      < div   id = "Tipp wird geladen"   Klasse = "Ladetipp" >   
  28.          < img   src = "Bilder/wird geladen.gif"   />   
  29.      </div>​​   
  30.        
  31.      <!-- Modales Fenster DIV simulieren -->   
  32.      < div   Klasse = "modal"   id = "modalDiv" > </ div >   
  33.        
  34.      < Skript   Typ = "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- CodeInhalt in die Zwischenablage kopieren
  1. * {
  2.      Rand : 0;
  3.      Polsterung : 0;
  4. }
  5.   
  6. html, Text {
  7.      Breite : 100 %;
  8.      Höhe : 100 %;
  9.      Schriftgröße : 14px ;
  10. }
  11.   
  12. div.header {
  13.      Breite : 100 %;
  14.      Höhe : 100px ;
  15.      Rahmen unten : 1px   gestrichelt   Blau ;
  16. }
  17.   
  18. div.Titel-äußeres {
  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 (Deckkraft = 60);
  41.      Hintergrundfarbe : #777 ;
  42. Deckkraft: 0,5;
  43. -moz-Deckkraft: 0,5;
  44. }
  45. .Ladetipp {
  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.      Rand : 1px   durchgezogener rgba(0, 0, 0, 0,2);
  60. Kastenschatten: 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 CodeInhalt in die Zwischenablage kopieren
  1. Funktion rightIFrameLoad(iframe) {
  2.      var pHeight = getWindowInnerHeight() - $( '#header' ).height() - 5;
  3.        
  4. $( 'div.body' ).höhe(pHeight);
  5. Konsole.log(pHeight);
  6.        
  7. }
  8.   
  9. // Browserkompatibilität Ermitteln Sie die Höhe des sichtbaren Bereichs des Browsers   
  10. Funktion getWindowInnerHeight() {
  11.      var winHeight = window.innerHeight
  12. || (Dokument.Dokumentelement && Dokument.Dokumentelement.Clienthöhe)
  13. || (Dokument.Textkörper && Dokument.Textkörper.Clienthöhe);
  14.      gibt WinHeight zurück ;
  15.        
  16. }
  17.   
  18. // Browserkompatibilität Ermitteln Sie die Breite des sichtbaren Bereichs des Browsers   
  19. Funktion getWindowInnerWidth() {
  20.      var winWidth = window.innerWidth
  21. || (Dokument.Dokumentelement && Dokument.Dokumentelement.Clientbreite)
  22. || (Dokument.Textkörper && Dokument.Textkörper.Clientbreite);
  23.      gibt Fensterbreite zurück ;
  24.        
  25. }
  26.   
  27. /**
  28. * Maskenebene anzeigen
  29. */   
  30. Funktion showOverlay() {
  31.      // Die Breite und Höhe der Maskenebene entsprechen der Breite und Höhe des Seiteninhalts   
  32. $( '.overlay' ).css({ 'Höhe' :$(document).height(), 'Breite' :$(document).width()});
  33. $( '.overlay' ).anzeigen();
  34. }
  35.   
  36. /**
  37. * Ladeaufforderung anzeigen
  38. */   
  39. Funktion showLoading() {
  40.      //Zeige zuerst die Maskenebene   
  41. Overlay anzeigen();
  42.      // Das Fenster mit der Ladeaufforderung ist zentriert   
  43. $( "#loadingTip" ).css( 'oben' ,
  44. (getWindowInnerHeight() - $( "#loadingTip" ).height()) / 2 + 'px' );
  45. $( "#loadingTip" ).css( 'links' ,
  46. (getWindowInnerWidth() - $( "#loadingTip" ).width()) / 2 + 'px' );
  47.                
  48. $( "#loadingTip" ).anzeigen();
  49. $(Dokument).scroll( Funktion () {
  50.          zurückkehren   FALSCH ;
  51. });
  52. }
  53.   
  54. /**
  55. * Ladeaufforderung ausblenden
  56. */   
  57. Funktion hideLoading() {
  58. $( '.overlay' ).hide();
  59. $( "#loadingTip" ).hide();
  60. $(Dokument).scroll( Funktion () {
  61.          zurückkehren   WAHR ;
  62. });
  63. }
  64.   
  65. /**
  66. * Simulieren Sie ein Popup-Modalfenster DIV
  67. * @param innerHtml modales Fenster HTML-Inhalt
  68. */   
  69. Funktion showModal(innerHtml) {
  70.      // Holen Sie sich das DIV, das zum Anzeigen des simulierten modalen Fensters verwendet wird   
  71.      var dialog = $( '#modalDiv' );
  72.        
  73.      //Setze den Inhalt   
  74. dialog.html(innerHtml);
  75.        
  76.      //Zentrieren Sie das modale Fenster DIV-Fenster   
  77. dialog.css({
  78.          'oben' : (getWindowInnerHeight() - dialog.height()) / 2 + 'px' ,
  79.          „links“ : (getWindowInnerWidth() – dialog.width()) / 2 + „px“   
  80. });
  81.        
  82.      // Fenster DIV abgerundete Ecken   
  83. dialog.find( '.modal-container' ).css( 'border-radius' , '6px' );
  84.        
  85.      //Ereignis der Schaltfläche zum Schließen des modalen Fensters   
  86. dialog.find( '.btn-close' ).click( Funktion (){
  87. schließenModal();
  88. });
  89.        
  90.      // Zeige die Maskenebene an   
  91. Overlay anzeigen();
  92.        
  93.      // Zeige die Maskenebene an   
  94. dialog.anzeigen();
  95. }
  96.   
  97. /**
  98. * Simulieren Sie das Schließen des modalen Fensters DIV
  99. */   
  100. Funktion schließeModal() {
  101. $( '.overlay' ).hide();
  102. $( '#modalDiv' ).hide();
  103. $( '#modalDiv' ).html( '' );
  104. }

Körper.html

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. <!DOCTYPE html >   
  2. < html   lang = "zh-CN" >   
  3. <Kopf>​​   
  4. < Meta   Zeichensatz = "utf-8" >   
  5. < Meta   http-equiv = "X-UA-kompatibel"   Inhalt = "IE=edge" >   
  6. <Titel> Hauptteil der Seite </Titel>​​   
  7. < Stil   Typ = "Text/CSS" >   
  8. * {
  9. Rand: 0;
  10. Polsterung: 0;
  11. }
  12.   
  13. html, Text {
  14. Breite: 100 %;
  15. Höhe: 100%;
  16. }
  17.   
  18. .äußeres {
  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. .Taste {
  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. }
  47.   
  48. </ Stil >   
  49. < Skript   Typ = "Text/Javascript" >   
  50.        
  51. Funktion showOverlay() {
  52. // Rufen Sie das übergeordnete Fenster auf, um die Maskenebene und die Ladeaufforderung anzuzeigen
  53. window.top.window.showLoading();
  54.   
  55. //Verwende den Timer, um das Schließen der Ladeaufforderung zu simulieren
  56. setzeTimeout(Funktion() {
  57. Fenster.oben.Fenster.AusblendenLaden();
  58. }, 3000);
  59.   
  60. }
  61.   
  62. Funktion showModal() {
  63. //Rufen Sie die übergeordnete Fenstermethode auf, um ein modales Popup-Fenster zu simulieren
  64. Fenster.top.showModal($('#modalContent').html());
  65. }
  66.        
  67. </ Skript >   
  68. </ Kopf >   
  69. < Textkörper >   
  70.      < div   Klasse = "äußere" >   
  71.          < div   Klasse = "inner" >   
  72.              < Schaltfläche   id = "btnShowLoading"   Klasse = "Schaltfläche"   onclick = 'showOverlay();' > Klicken, um die Overlay-Ebene einzublenden </ button >   
  73.              < Schaltfläche   id = "btnShowModal"   Klasse = "Schaltfläche"   onclick = 'showModal();' > Klicken, um das modale Fenster anzuzeigen </ button >   
  74.          </div>​​   
  75.      </div>​​   
  76.        
  77.      <!-- Modaler Fensterinhalt DIV, setze den DIV-Inhalt dieser Seite auf das übergeordnete Fenster DIV und zeige ihn modal an -->   
  78.      < div   id = "modaler Inhalt"   Stil = 'Anzeige: keine;' >   
  79.          < div   Klasse = "Modalcontainer"   Stil = 'Breite: 100 %; Höhe: 100 %; Hintergrundfarbe: weiß;' >   
  80.              < div   Stil = 'Breite: 100 %; Höhe: 49 Pixel; Position: relativ; links: 50 %; oben: 50 %;' >   
  81.                  < Spanne   Stil = 'Schriftgröße: 36px; Breite: 100 %; Textausrichtung: zentriert; Anzeige: Inline-Block; Position: erben; links: -50 %; oben: -50 %;' > Modales Fenster 1 </ span >   
  82.              </div>​​   
  83.              < Schaltfläche   Klasse = "btn-schließen"   Stil = 'Breite: 100px; Höhe: 30px; Position: absolut; rechts: 30px; unten: 20px ; ' > Schließen </button>   
  84.          </div>​​   
  85.      </div>​​   
  86.      < Skript   Typ = "Text/Javascript"   src = "js/jquery-1.10.2.js" > </ Skript >   
  87. </ Körper >   
  88. </ html >   
  89.   

Laufergebnisse:

Initialisierung

Maskenebene und Ladeaufforderung anzeigen

Zeigen Sie die Maskenebene an und simulieren Sie ein modales Popup-Fenster

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein.

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

<<:  Zusammenfassung wichtiger MySQL-Protokolldateien

>>:  Ein kurzer Vortrag über berechnete Eigenschaften und das Abhören von Eigenschaften in Vue

Artikel empfehlen

Beispiel für den schnellen Aufbau einer LEMP-Umgebung mit Docker

LEMP (Linux + Nginx + MySQL + PHP) ist heutzutage...

Zusammenfassung der Probleme bei der Installation und Verwendung des MySQL 5.7.19 Winx64 ZIP-Archivs

Heute habe ich gelernt, MySQL zu installieren. Da...

Lösen Sie das Problem, dass VMWare nach der Installation des Mac-Systems nicht im Vollbildmodus angezeigt werden kann

System: VMTOOLs-Download: Verknüpfung: https://pa...

JavaScript implementiert eine Eingabefeldkomponente

In diesem Artikelbeispiel wird der spezifische Co...

Benutzerdefinierter Kalendereffekt in JavaScript

In diesem Artikel wird der spezifische Code des b...

Detaillierte Anweisungen zum Download und Installationsprozess von MySQL 5.7.18

MySql herunterladen 1. Öffnen Sie die offizielle ...

Analyse des rel-Attributs in HTML

.y { background: url(//img.jbzj.com/images/o_y.pn...

Einführung und Installation von vue-cli

Inhaltsverzeichnis 1. Einleitung 2. Einführung in...

Testen des Hyperlink-Öffnungsziels

Das Zielattribut eines Links bestimmt, wohin der L...

Lösung für MySQL-Fehler beim Ändern des SQL-Modus

Inhaltsverzeichnis Ein Mord verursacht durch ERR ...

Beispiel für die Generierung von Zufallszahlen und die Verkettung von Zeichenfolgen in MySQL

Dieser Artikel beschreibt anhand eines Beispiels,...

Besprechen Sie die Anwendung von Mixin in Vue

Mixins bieten eine sehr flexible Möglichkeit, wie...

Zusammenfassung der speicherbezogenen Parameter von MySQL 8.0

Theoretisch entspricht der von MySQL verwendete S...

Alibaba Cloud Server Ubuntu Konfigurations-Tutorial

Da für den Import benutzerdefinierter Ubuntu-Imag...

So starten Sie ein Java-Programm im Docker

Erstellen Sie ein einfaches Spring Boot-Webprojek...