communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 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
Libérer： 2016-05-16 16:45:59
original
1731 Les gens l'ont consulté

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

Étiquettes associées：
HTML实现遮罩层 HTML使用遮罩层
source：php.cn
Article précédent：Langage de balisage Web mobile recommandé par le W3C XHTML Basic 1.1_HTML/Xhtml_Web production de pages Article suivant：Compréhension approfondie de la surveillance des entrées de formulaires HTML_HTML/Xhtml_production de pages Web
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
Depuis 2024-04-29 11:01:01
0
3
2250
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
11
2387
La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
Depuis 2024-04-19 15:37:47
0
1
1997
Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
Depuis 2024-04-18 23:52:34
0
1
1884
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1954
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal