Masque transparent simple plein écran (lightBox)

Auteur：Eve Cole Date de mise à jour：2010-06-09 17:08:28

Il n'y a pas si longtemps, un internaute qui était sur le point d'obtenir son diplôme m'a envoyé un e-mail. Son projet de fin d'études devait obtenir un effet d'écran de verrouillage, mais il ne comprenait pas le code source de la boîte de dialogue que j'avais publiée auparavant. Il m'a demandé s'il pouvait l'expliquer. code lié à l'écran de verrouillage. J'ai dit que je le publierais dans deux jours. Comme j'ai été très occupé ces derniers temps, je ne m'en souviens que maintenant et j'espère qu'il n'est pas trop tard pour écrire cet article.

Pour aller droit au but :

De nos jours, les couches de masques semi-transparentes plein écran sont largement utilisées dans les sites Web Web2.0. La plupart des masques sont implémentés en calculant la taille de la page, puis en la recouvrant d'une couche de la même taille que la page, comme Tencent qzone et le backend wordpress. . Cette méthode est compréhensible, mais elle échouera sous IE8 lorsque la page est très longue (l'explication à partir d'informations étrangères est qu'elle est liée à la carte graphique de la machine. Certains étudiants aux tracés parfaits se sont grattés la tête après avoir rencontré ce problème). , ils veulent même que IE8 soit obligé d'utiliser la méthode d'IE7 pour analyser ses travaux. En fait, nous avons une meilleure solution, utilisons CSS pour le résoudre !

Vous vous souvenez de « position : fixe » ? C'est un nouvel attribut de CSS2. Il peut faire en sorte qu'un élément reste immobile sur la page et ne bouge pas lorsque vous faites glisser la barre de défilement. Par exemple, la barre de navigation fixe en haut de Qzone est implémentée de cette manière. De même, nous pouvons également utiliser un calque avec une hauteur et une largeur de 100 % pour couvrir la fenêtre d'affichage du navigateur, de sorte qu'un masquage plein écran puisse être réalisé. Il n'est pas nécessaire de calculer la taille de la page, ni de la modifier dynamiquement. la taille lors du redimensionnement du navigateur.

Mais il y a un casse-tête. IE6 ne prend pas en charge "position : fixe". Nous ne pouvons modifier dynamiquement sa valeur TOP que via js pour simuler un positionnement statique. Lorsque vous faites glisser la barre de défilement, le masque tremblera définitivement car à chaque fois qu'il changera, IE réapparaîtra. -rendre à nouveau. Mais Microsoft nous a fourni une fonctionnalité très intéressante. Si vous définissez une image d'arrière-plan positionnée statiquement pour la balise html ou body, le calque ne tremblera pas lorsque la barre de défilement est déplacée, simulant presque parfaitement "position:fixed" ". Dans des projets réels, j'ai constaté que cette fonctionnalité peut également déclencher d'autres fonctions spéciales, que j'expliquerai plus tard.

Afin d'éviter des problèmes, nous utilisons l'expression maléfique pour écrire des scripts en CSS pour IE6 et repositionnons notre calque de masque lorsque nous faisons glisser la barre de défilement. La légende raconte que l'expression nécessite beaucoup de performance, mais notre expression ne présente presque aucune perte. Les étudiants intéressés peuvent étudier l'expression en profondeur.

D'accord, après avoir été compatible avec la poupée à grosse tête IE6, notre masque d'écran de verrouillage a été adopté par les navigateurs grand public. Cependant, les étudiants qui utilisent js pour écrire des effets sont toujours très frustrés et veulent toujours ajouter quelque chose, nous allons donc en ajouter un. petit script pour interrompre les opérations de l'utilisateur lorsque l'écran est verrouillé, désactiver la barre de défilement, la molette, la touche de tabulation, tout sélectionner, actualiser et cliquer avec le bouton droit pour simuler un véritable « écran de verrouillage » :

Boîte de code d'exécution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>page de verrouillage</ title> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay { visibilité:hidden; top:0; z-index:1987; 100%; hauteur:100%; arrière-plan:#000; filtre:alpha(opacité=70); opacité:0,7 } /*IE6 corrigé*/ * html { arrière-plan:url(*) corrigé } :0; hauteur:100%; } * html #pageOverlay { position : absolue ; gauche : expression (documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); ); } </style> <script> (function(){ // Récupère l'objet var $ = function (id){ return document.getElementById(id); }; // Traverse var each = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i }; // Liaison d'événement var bind = function (obj, type, fn) { if ( obj.attachEvent) { obj['e' + type + fn] = fn; obj[type + fn] = function(){obj['e' + type + fn](window.event);} obj.attachEvent( 'on' + type, obj[type + fn]); else { obj.addEventListener(type, fn, false }; // Supprimer l'événement var unbind = function (obj, type, fn) { if ( obj.detachEvent) { try { obj.detachEvent('on' + type, obj[type + fn]); obj[type + fn] = null } catch(_) {}; , fn, false }; }; // Empêche le comportement par défaut du navigateur var stopDefault = function(e){ e.preventDefault() : e.returnValue = false }; Position var getPage = function(){ var dd = document.documentElement, db = document.body; return { gauche : Math.max(dd.scrollLeft, db.scrollLeft), haut : Math.max(dd.scrollTop, db. scrollTop) }; }; // Écran de verrouillage var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; var p = getPage(), left = p.left, top = p.top; // Restrictions d'utilisation de la souris this.mouse = function(evt){ var e = evt || stopDefault(e); each(['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { bind(document, o, lock.mouse }); // Bloquer les touches spécifiques : F5, Ctrl + R, Ctrl + A, Tab, Haut, Bas this.key = function(evt){ var e = evt || window.event, key = e.keyCode; if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && clé == 65) || (clé == 9) || (clé == 40)) { try{ e.keyCode = 0; ){}; stopDefault(e); bind(document, 'keydown', lock.key); }, close : function(){ $('pageOverlay').style.visibility = 'hidden'; (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); clé); } }; bind(window, 'load', function(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function( ){ lock.close(); }; })(); </script> </head> <body> <button id="btn_lock" style="position : absolue ; gauche : 50 % ; haut : 40%; ">Activer l'écran de verrouillage</button> <ol id="test"> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</ li> <li >囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li>囧</li> <li >囧</li> li> <li>囧</li> </ol> <div id="pageOverlay"></div> </body> </html>
[Ctrl+A Sélectionner tous les conseils : vous pouvez d'abord modifier une partie du code, puis appuyer sur Exécuter]

Texte original : http://www.planeart.cn/?p=792