Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
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

WBOY
Freigeben： 2016-05-16 16:45:59
Original
1730 Leute haben es durchsucht

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

Verwandte Etiketten：
HTML实现遮罩层 HTML使用遮罩层
Quelle：php.cn
Vorheriger Artikel：Vom W3C empfohlene mobile Web-Auszeichnungssprache XHTML Basic 1.1_HTML/Xhtml_Webseitenproduktion Nächster Artikel：Vertiefte Kenntnisse der HTML-Formulareingabeüberwachung, HTML/Xhtml-Webseitenproduktion
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
Aus 2024-04-29 11:01:01
0
3
2248
So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
Aus 2024-04-23 00:22:19
0
11
2387
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1997
Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
Aus 2024-04-18 23:52:34
0
1
1882
Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
Aus 2024-04-16 10:10:18
0
0
1952
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage