Простая полноэкранная прозрачная маска (lightBox)

Автор：Eve Cole Время обновления：2010-06-09 17:08:28

Не так давно пользователь сети, который собирался закончить обучение, прислал мне электронное письмо. В его дипломном проекте нужно было добиться эффекта экрана блокировки, но он не мог понять исходный код диалогового окна, которое я опубликовал ранее. Он спросил, может ли он объяснить. Код, связанный с экраном блокировки, я сказал, что опубликую его через два дня. Поскольку в последнее время я был очень занят, то вспомнил об этом только сейчас и надеюсь, что еще не поздно написать эту статью.

Переходим к делу:

В настоящее время полноэкранные полупрозрачные слои масок широко используются на веб-сайтах web2.0. Большинство масок реализуются путем расчета размера страницы и последующего покрытия ее слоем того же размера, что и страница, например, Tencent qzone и WordPress. . Этот метод понятен, но он не работает в IE8, когда страница очень длинная (объяснение из зарубежной информации заключается в том, что это связано с видеокартой машины). Некоторые студенты с идеальными графиками в отчаянии чесали головы, столкнувшись с этой проблемой. , они даже хотят, чтобы IE8 был вынужден использовать метод IE7 для разбора его работ. На самом деле у нас есть лучший способ: давайте воспользуемся CSS для решения этой проблемы!

Помните « позиция: фиксированная »? Это новый атрибут CSS2. Он может заставить элемент оставаться на странице неподвижным и не перемещаться при перетаскивании полосы прокрутки. Например, таким образом реализована фиксированная панель навигации в верхней части Qzone. Аналогичным образом мы также можем использовать слой со 100% высотой и шириной, чтобы закрыть область просмотра браузера, чтобы можно было добиться полноэкранной маскировки. Нет необходимости рассчитывать размер страницы и нет необходимости динамически изменять. размер при изменении размера браузера.

Но есть головная боль. IE6 не поддерживает «position: fix». Мы можем только динамически изменять его значение TOP через js, чтобы имитировать статическое позиционирование. При перетаскивании полосы прокрутки маска обязательно будет дрожать, потому что каждый раз, когда она меняется, IE будет перезагружаться. -рендеринг еще раз. Но Microsoft предоставила нам очень интересную функцию. Если вы установите статически позиционированное фоновое изображение для тега html или body, слой не будет трястись при перетаскивании полосы прокрутки, почти идеально имитируя «position:fixed». В реальных проектах я обнаружил, что эта функция также может запускать другие специальные функции, о которых я расскажу позже.

Чтобы избежать проблем, мы используем злое выражение для написания некоторых скриптов на CSS для IE6 и меняем положение слоя маски при перетаскивании полосы прокрутки. Легенда гласит, что выражение требует очень больших усилий, но наше выражение почти не имеет потерь. Заинтересованные ученики могут углубленно изучать выражение.

Хорошо, после совместимости с большеголовой куклой IE6 наша маска экрана блокировки была принята основными браузерами. Однако студенты, которые используют js для написания эффектов, всегда очень расстраиваются и всегда хотят что-то добавить, поэтому мы добавим. небольшой скрипт для прерывания операций пользователя, когда экран заблокирован, отключения полосы прокрутки, колеса, клавиши табуляции, выбора всего, обновления и щелчка правой кнопкой мыши для имитации настоящего «экрана блокировки»:

Окно запуска кода
<!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>страница блокировки</ title> <meta name="author" content="www.planeart.cn" /> <style> #pageOverlay {видимость: скрыто; положение: фиксированное; слева: 0; z-index: 1987; 100%; высота:100%; фон:#000; filter:alpha(opacity=70); :0; высота:100%; } * html #pageOverlay { позиция: абсолютное; слева: выражение (documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth); сверху: выражение (documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } </style> <script> (function(){ // Получаем объект var $ = function (id){ return document.getElementById(id); }; // Обходим vareach = function(a, b) { for (var i = 0, len = a.length; i < len; i++) b(a[i], i } // Привязка событий varbind = 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 }); // Удалить событие var unbind = function (obj, type, fn) { if ( obj.detachEvent) { try { obj.detachEvent('on' + type, obj[type + fn] = null; } catch(_) {}; else { obj.removeEventListener(type) , fn, false); }; }; // Запретить поведение браузера по умолчанию var stopDefault = function(e){ e.preventDefault ? e.preventDefault() : e.returnValue = false }; Позиция var getPage = function() { var dd = document.documentElement, db = document.body; return { слева: Math.max(dd.scrollLeft, db.scrollLeft), сверху: Math.max(dd.scrollTop, db. ScrollTop) }; // Экран блокировки var lock = { show: function(){ $('pageOverlay').style.visibility = 'visible'; left = p.left, top = p.top; // Ограничения на операции с мышью this.mouse = function(evt){ var e = evt || stopDefault(e); Scroll(left, top }; 'mousewheel', 'scroll', 'contextmenu'], function(o, i) {bind(document, o, lock.mouse }); // Блокируем определенные клавиши: F5, Ctrl + R, Ctrl + A, Tab, Вверх, Вниз this.key = function(evt){ var e = evt || window.event, key = e.keyCode; if((key == 116) || (e.ctrlKey && key == 82) || (e.ctrlKey && key == 65) || (key == 38) || (key == 40)) { try{ e.keyCode = 0; ){}; stopDefault(e); }; };bind(document, 'keydown', lock.key }, close: function(){ $('pageOverlay').style.visibility = 'скрытый'; (['DOMMouseScroll', 'mousewheel', 'scroll', 'contextmenu'], function(o, i) { unbind(document, o, lock.mouse); }); unbind(document, 'keydown', lock. key); } };bind(window, 'load', function(){ $('btn_lock').onclick = function(){ lock.show(); }; $('pageOverlay').onclick = function( ){ lock.close(); }); })(); </script> </head> <body> <button id="btn_lock" style="position: Absolute; left:50%; top: 40%; ">Включить экран блокировки</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: Советы по выбору всех: сначала вы можете изменить часть кода, а затем нажать «Выполнить»]

Исходный текст: http://www.planeart.cn/?p=792.