Полноэкранный экранированный и автоматически центрируемый лайтбокс

Автор：Eve Cole Время обновления：2009-07-27 17:14:47

[Браузеры, участвующие в тесте: IE6/IE7/IE8/FF3.5/OP9.6/SF4/Chrome2]
[Операционная система: Windows]

Целью этого руководства является разделение стиля и поведения LightBox и сокращение работы JS в различных аспектах (полноэкранное маскирование, выбор маски в ie6, двустороннее центрирование, адаптивный по высоте контент и т. д.).

Сначала код :

<!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 ">
<голова>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Чомо" />
<link rel="start" href=" http://www.14px.com " title="Home" />
<title>Полноэкранное экранирование, автоматическое центрирование лайтбокса</title>
<style type="text/css">
* {маржа:0; заполнение:0;
HTML, тело {высота: 100%; переполнение: скрытый шрифт: 12 пикселей/1,5 Simsun;}
.myPage {высота строки: 3; переполнение: авто ширина: 100%; высота: 100%;}
.лайтбокс,
.popupCover,
.popupIframe,
.popupComponent {позиция: абсолютная; слева: 0; ширина: 100%; высота: 100%;}
.popupComponent { z-index:2; дисплей: нет;}
.popupIframe {дисплей: нет; _display: блок; _filter: альфа (непрозрачность = 0);}
.popupCover {background:#000; opacity:0.7; *filter:alpha(opacity=70);}
.lightBox {текстовое выравнивание: центр; переполнение: авто;}
.lightBoxContent { display: inline-block; * display: inline; масштаб: 300 пикселей; дополнение: 10 пикселей; граница: 5 пикселей сплошной # 00b4ff;
.lightBoxMaxHeight { display: inline-block; вертикальное выравнивание: средняя высота: 100%; * высота: 99,5%; ширина: 1 пиксель; переполнение: поле слева: -1 пиксель;}
.lightBoxWrapper { display: inline-block; *display: inline; масштаб: 1; выравнивание текста: по левому краю;}
.lightBoxClose { цвет:#f00;}
.lightBoxSubmit {margin-top:10px; padding-top:5px; border-top:1px Solid #ccc;}
.lightBoxSubmit input { размер шрифта: 12 пикселей; заполнение: 0 10 пикселей; поле: 0 5 пикселей;}
</стиль>
</голова>
<тело>
<div class="popupComponent" id="lightBox">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<span class="lightBoxMaxHeight"></span>
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Текст центрируется, если подсказка меньше одной строки<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox')" />
</div>
</div>
</div>
</div>
<div class="popupComponent" id="lightBox2">
<iframe class="popupIframe"></iframe>
<div class="popupCover"></div>
<div class="lightBox">
<div class="lightBoxContent">
<div class="lightBoxWrapper">
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
Когда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экранаКогда контент превысил высоту одного экрана<br />
</div>
<div class="lightBoxSubmit">
<input type="button" value="OK" onclick="hideLayer('lightBox2')" />
<input type="button" value="Cancel" onclick="hideLayer('lightBox2')" />
</div>
</div>
<span class="lightBoxMaxHeight"></span>
</div>
</div>
<div class="myPage">
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
<div style="text-align:center;"><input type="button" value="Кнопка на первом экране" onclick="showLayer('lightBox')" /></div>
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
<select><option>Выбор, используемый для проверки возможности поддержки IE6</option></select><br />
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
<select><option>Еще один выбор для проверки возможности поддержки IE6</option></select><br />
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
<div style="text-align:center;"><input type="button" value="Кнопка, расположенная на втором экране" onclick="showLayer('lightBox')" /><input type="button" value ="Когда содержимое превышает высоту одного экрана" onclick="showLayer('lightBox2')" /></div>
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
Притворяясь богатым содержанием<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />Притворяясь богатым контентом<br />
</div>
<скрипт>
функция showLayer(id) {
document.getElementById(id).style.display = "блок";
}
функция скрытьLayer (идентификатор) {
document.getElementById(id).style.display = "none";
}
</скрипт>
</тело>
</html>

Этот лайтбокс имеет следующие характеристики, вы можете проверить его, изменив код ^-^:

Щелчок в любом месте страницы может полностью экранировать экран (в настоящее время любым элементом, включая полосу прокрутки, нельзя напрямую управлять). В IE6 выбранный элемент можно экранировать, не скрывая его (недостаток метода экранирования iframe: после экранирования, если перетащить полосу прокрутки, и выделение все равно переместится вверх).
Высота лайтбокса адаптируется к его содержимому и выглядит идеально по центру.
Когда содержимое представляет собой одну строку, оно отображается в центре; когда содержимое состоит из нескольких строк, оно отображается слева; когда высота содержимого такова, что лайтбокс превышает высоту экрана, отображается полоса прокрутки; и отображается вверху, чтобы читатели могли прочитать его полностью.

Если вам интересно, для справки доступны следующие советы, составляющие этот лайтбокс:

1. Метод полноэкранной маскировки:

А. Скройте полосу прокрутки html/body.
Б. Используйте элемент div в качестве маски, а затем используйте другой элемент div, чтобы создать страницу с полосами прокрутки: одну сверху, другую снизу.