recherche

Maison  >  Article  >  interface Web  >  Comment implémenter un calque de masque en HTML Comment utiliser un calque de masque dans la production de pages HTML_HTML/Xhtml_Web

Comment implémenter un calque de masque en HTML Comment utiliser un calque de masque dans la production de pages HTML_HTML/Xhtml_Web

WBOY
WBOYoriginal
2016-05-16 16:45:591678parcourir

L'utilisation d'un calque de masque dans les pages Web peut empêcher des opérations répétées et un chargement rapide ; il peut également simuler des fenêtres modales contextuelles.

Idée d'implémentation : Un DIV sert de calque de masque et un DIV affiche l'image GIF dynamique de chargement. Dans l’exemple de code suivant, il montre également comment appeler le calque de masque d’affichage et de masquage dans la sous-page iframe.

Exemple de code :

index.html

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html lang="zh- CN">  
  3. <tête>  
  4. <meta charset="utf- 8">  
  5. <méta http-equiv=" Compatible X-UA" contenu="IE=edge">  
  6. <titre>HTML遮罩层titre>  
  7. <lien rel="feuille de style"  href="css/index.css">  
  8. tête>  
  9. <corps>  
  10.     <div class="en-tête"  id="en-tête">  
  11.         <div class="titre- extérieur">  
  12.             <span classe="titre" >  
  13.                 HTML遮罩层使用   
  14.             span>  
  15.         div>  
  16.     div>  
  17.     <div class="corps"  identifiant="corps">  
  18.         <iframe id="iframeRight"  nom="iframeRight" largeur="100%" hauteur="100%"  
  19.             défilement="non" frameborder="0"  
  20.             style="bordure : 0px;marge : 0px; padding : 0px; largeur : 100 % ; hauteur : 100 %;débordement : caché;"  
  21.             onload="rightIFrameLoad(this)" src="body.html">iframe>  
  22.     div>  
  23.        
  24.       
  25.     <div id="superposition"  classe="superposition">div>  
  26.       
  27.     <div id="loadingTip"  classe="astuce de chargement">  
  28.         <img src="images/ chargement.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"> script>  
  35.     <script type="texte/ javascript" src="js/index.js">< ;/script>  
  36. corps>  
  37. html>  

index.css

Code CSS复制内容到剪贴板
  1. * {   
  2.     marge : 0 ;   
  3.     rembourrage : 0 ;   
  4. }   
  5.   
  6. html, corps {   
  7.     largeur : 100 % ;   
  8.     hauteur : 100 % ;   
  9.     taille de la police : 14px ;   
  10. }   
  11.   
  12. div.header {   
  13.     largeur : 100 % ;   
  14.     hauteur : 100px ;   
  15.     bordure inférieure : 1px pointillé bleu;   
  16. }   
  17.   
  18. div.title-outer {   
  19.     position : relative ;   
  20.     haut : 50 % ;   
  21.     hauteur : 30px ;   
  22. }   
  23. span.title {   
  24.     alignement du texte : gauche ;   
  25.     position : relative ;   
  26.     gauche : 3 % ;   
  27.     haut : -50 % ;   
  28.     taille de police : 22px ;   
  29. }   
  30.   
  31. div.body {   
  32.     largeur : 100 % ;   
  33. }   
  34. .overlay {   
  35.     position : absolue ;   
  36.     haut : 0px;   
  37.     gauche : 0px ;   
  38.     z-index : 10001 ;   
  39.     affichage :aucun ;   
  40.     filter:alpha(opacity=60);   
  41.     couleur de fond : #777 ;   
  42.     opacité : 0,5 ;   
  43.     -moz-opacité : 0,5 ;   
  44. }  
  45. .loading-tip {   
  46.     z-index : 10002 ;   
  47.     position : fixe ;   
  48.     affichage :aucun ;   
  49. }   
  50. .loading-tip img {   
  51.     largeur :100px ;   
  52.     hauteur :100px ;   
  53. }   
  54.   
  55. .modal {   
  56.     position :absolue ;   
  57.     largeur : 600px ;   
  58.     hauteur : 360px ;   
  59.     bordure : 1px solide rgba(0, 0, 0, 0,2 );   
  60.     box-shadow : 0px 3px 9px rgba (0, 0, 0, 0,5 );   
  61.     affichage : aucun ;   
  62.     z-index : 10003 ;   
  63.     bordure-rayon : 6px ;   
  64. }   
  65.   

index.js

Code JavaScript复制内容到剪贴板
  1. fonction rightIFrameLoad(iframe) {
  2.  var pHeight = getWindowInnerHeight() - $('#header').height() - 5 ;
  3.  
  4. $('div.body').hauteur(pHauteur);
  5. console.log(pHauteur);
  6.  
  7. }
  9. // Compatibilité du navigateur Obtenez la hauteur de la fenêtre d'affichage du navigateur
  10. fonction getWindowInnerHeight() {
  11. var winHeight = window.innerHeight
  12. || (document.documentElement && document.documentElement.clientHeight)
  13. || (document.body && document.body.clientHeight);
  14. retour winHeight;
  15.  
  16. }
  18. // Compatibilité du navigateur Obtenir la largeur de la fenêtre d'affichage du navigateur
  19. fonction getWindowInnerWidth() {
  20. var winWidth = window.innerWidth
  21. || (document.documentElement && document.documentElement.clientWidth)
  22. || (document.body && document.body.clientWidth);
  23. retour winWidth;
  24.  
  25. }
  27. /**
  28. * Afficher le calque de masque
  29. */
  30. fonction showOverlay() {
  31. //La largeur et la hauteur du calque de masque sont respectivement la largeur et la hauteur du contenu de la page
  32. $('.overlay').css({'hauteur':$(document). height(),'width':$(document).width()};
  33. $('.overlay').show();
  34. }
  36. /**
  37. * Afficher l'invite de chargement
  38. */
  39. fonction showLoading() {
  40. //Affichez d'abord le calque du masque
  41. showOverlay();
  42. // La fenêtre d'invite de chargement est centrée
  43. $("#loadingTip").css('top',
  44. (getWindowInnerHeight() - $("#loadingTip").height()) / 2 'px');
  45. $("#loadingTip").css('gauche',
  46. (getWindowInnerWidth() - $("#loadingTip").width()) / 2 'px');
  47.                                                          
    48. $(
  48. "#loadingTip").show();
    49. $(document).scroll(
  49. fonction() {
  50. retour faux ;
    51. });
    52. }
  54. /**
  55. * Masquer l'invite de chargement
  56. */
  57. fonction hideLoading() {
    58. $(
  58. '.overlay').hide( );
    59. $(
  59. "#loadingTip").hide( );
    60. $(document).scroll(
  60. fonction() {
  61. retour vrai ;
    62. });
    63. }
  64. /**
  65. * Simuler une fenêtre modale pop-up DIV
  66. * @param innerHtml contenu HTML de la fenêtre modale
  67. */
  68. fonction showModal(innerHtml) {
  69. // Récupère le DIV utilisé pour afficher la fenêtre modale de simulation
  70. var dialog = $('#modalDiv'
    71. );
  71.  
  72. // Paramétrage du contenu
  73. dialog.html(innerHtml);
  74.  
  75. // Fenêtre modale La fenêtre DIV est centrée
  76. dialogue.css({
  77.  'top' : (getWindowInnerHeight() - dialog.height()) / 2 'px' ,
  78.  'gauche' : (getWindowInnerWidth() - dialog.width()) / 2 'px'
  79. });
  80.  
  81. // Fenêtre DIV coins arrondis
  82. Dialog.find('.modal-container').css('border-radius', '6px');
  83.  
  84. // Événement du bouton de fermeture de la fenêtre modale
  85. dialog.find('.btn-close').click(fonction(){
  86. closeModal();
  87. });
  88.  
  89. //Afficher le calque de masque
  90. showOverlay();
  91.  
  92. //Afficher le calque de masque
  93. dialogue.show();
  94. }
  96. /**
  97. * Simuler la fermeture de la fenêtre modale DIV
  98. */
  99. fonction closeModal() {
  100. $('.overlay').hide(
    101. );
  101. $('#modalDiv').hide(
    102. );
  102. $('#modalDiv').html(''
    103. );
  103. }

corps.html

Code XML/HTMLCopier le contenu dans le presse-papiers
  1. >  
  2. <html lang="zh- CN">  
  3. <tête>  
  4. <meta charset="utf- 8">  
  5. <méta http-equiv=" Compatible X-UA" contenu="IE=edge">  
  6. <titre>corps 页面titre>  
  7. <style type="texte/ css">  
  8. * {   
  9.     marge : 0 ;   
  10.     remplissage : 0 ;   
  11. }   
  12.   
  13. html, corps {   
  14.     largeur : 100 % ;   
  15.     hauteur : 100 % ;   
  16. }   
  17.   
  18. .extérieur {   
  19.     largeur : 200 px ;   
  20.     hauteur : 120 px ;   
  21.     position : relative ;   
  22.     haut : 50 % ;   
  23.     à gauche : 50 % ;   
  24. }   
  25.   
  26. .inner {   
  27.     largeur : 200 px ;   
  28.     hauteur : 120 px ;   
  29.     position : relative ;   
  30.     haut : -50 % ;   
  31.     à gauche : -50 % ;   
  32. }   
  33.   
  34. .bouton {   
  35.     largeur : 200 px ;   
  36.     hauteur : 40 px ;   
  37.     position : relative ;   
  38. }   
  39.     
  40. .button#btnShowLoading {   
  41.     haut : 0 ;   
  42. }   
  43.   
  44. .button#btnShowModal {   
  45.     haut : 30 % ;   
  46. }
  48. style>
  49. <script type="texte/ javascript">
  50.  
  51. function showOverlay() {
  52. // Appelez la fenêtre parent pour afficher le calque de masque et les invites de chargement
  53. window.top.window.showLoading();
  55. // Utilisez une minuterie pour simuler la fermeture de l'invite de chargement
  56. setTimeout(function() {
  57. window.top.window.hideLoading();
  58. }, 3000);
  60. }
  62. function showModal() {
  63. // Appel de la méthode de la fenêtre parent pour simuler une fenêtre modale pop-up
  64. window.top.showModal($('#modalContent').html());
  65. }
  66.  
  67. script>
  68. tête>
  69. <corps>
  70.  <div class='extérieur' >
  71.  <div classe='intérieur' >
  72.  <bouton id='btnShowLoading' classe='bouton' onclick='showOverlay();'>Cliquez pour faire apparaître le calque de masquebouton>
  73.  <bouton id='btnShowModal' classe='bouton' onclick='showModal();'>Cliquez pour faire apparaître la fenêtre modalebouton>
  74. div>
  75.  div> 
  76.  
  78.  <div id='modalContent' style='affichage : aucun;'>
  79.  <div class='modal- conteneur' style='largeur : 100 %;hauteur : 100%;couleur de fond : blanc;'>
  80.  <div style='largeur : 100 %;hauteur : 49px;position : relative;gauche : 50 %;haut : 50%;'>
  81.                 <span style='font- taille : 36 px ; largeur : 100 % ; texte-align:centre; display : bloc en ligne ; position:hériter; gauche : -50 %;haut :  -50 %;'>模态窗口1span >  
  82.             div>  
  83.             <bouton classe='btn- fermer' style='largeur : 100 px ; hauteur : 30 px ; position : absolue ; à droite : 30 px ; en bas : 20px;'>关闭bouton>
  84.         div>  
  85.     div>  
  86.     <script type='text/ javascript' src="js/jquery-1.10.2.js"> script>  
  87. corps>  
  88. html>  
  89.   

运行结果：

初始化

显示遮罩层和Chargement提示

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

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

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

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Langage de balisage Web mobile recommandé par le W3C XHTML Basic 1.1_HTML/Xhtml_Web production de pagesArticle suivant：Langage de balisage Web mobile recommandé par le W3C XHTML Basic 1.1_HTML/Xhtml_Web production de pages

Articles Liés

Voir plus