Предлагается решение следующей
задачи:
Есть блок <div></div>, для которого известна ширина и высота. Необходимо по нажатию ссылки отображать этот блок ровно по центру видимой части окна браузера, поверх всех элементов, причем сохранять это положение при изменениях размера экрана и скроллинге.
Дополнительные требования: максимальная кроссбраузерность.
Варианты использования: вывод системных сообщений об ошибках и успехах. Вывод дополнительной информации (например, увеличенное изображение). Вывод рекламных баннеров.
Решение:<!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=windows-1251" />
<title>Блок по центру видимой части окна</title>
<style>
#center_block
{
position:absolute;
top: 0px;
left: 0px;
margin: 0px;
width: 300px;
height:200px;
border: #ff0000 1px double;
background-color:#FFCCFF;
display: none;
z-index: 100;
}
</style>
<script type="text/javascript">
function getBodyScrollTop() // координата верхнего левого угла (Y) видимой части с учетом скроллинга
{
return self.pageYOffset || (document.documentElement && document.documentElement.scrollTop) || (document.body && document.body.scrollTop);
}
function getBodyScrollLeft() // координата верхнего левого угла (X) видимой части с учетом скроллинга
{
return self.pageXOffset || (document.documentElement && document.documentElement.scrollLeft) || (document.body && document.body.scrollLeft);
}
function getClientWidth() // ширина видимой части экрана
{
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}
function getClientHeight() // высота видимой части экрана
{
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}
function show_center_block() // функция отображает блок
{
var block = document.getElementById("center_block");
block.style.display = "block";
block.style.top = Math.floor(getClientHeight() / 2 + getBodyScrollTop()) + "px";
block.style.left = Math.floor(getClientWidth() / 2 + getBodyScrollLeft()) + "px";
block.style.margin = "-" + Math.floor(200 / 2) + "px 0px 0px -" + Math.floor(300 / 2) + "px";
}
function unshow_center_block() // функция скрывает блок
{
var block = document.getElementById("center_block");
block.style.display = "none";
}
window.onscroll = window.onresize = function ()
{
var block = document.getElementById("center_block");
if (block.style.display == "block")
{
block.style.top = Math.floor(getClientHeight() / 2 + getBodyScrollTop()) + "px";
block.style.left = Math.floor(getClientWidth() / 2 + getBodyScrollLeft()) + "px";
block.style.margin = "-" + Math.floor(200 / 2) + "px 0px 0px -" + Math.floor(300 / 2) + "px";
}
}
</script>
</head>
<body>
<div id="center_block">
некоторый текст в блоке
<a href="javascript:void(0);" onclick="unshow_center_block()">Закрыть</a>
</div>
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
27<br />
28<br />
29<br />
30<br />
31<br />
32<br />
33<br />
34<br />
35<br />
36<br />
37<br />
38<br />
39<br />
40<br />
41<br />
42<br />
43<br />
44<br />
45<br />
46<br />
47<br />
48<br />
<a href="javascript:void(0);" onclick="show_center_block();return false;">Показать</a>
</body>
</html>
Где посмотреть и потестировать:1.
http://marahtanov.ru/UserFiles/File/forum/centerdiv.html - данный пример (пролистать до низа страницы и нажать кнопку "Показать")
2.
http://marahtanov.ru/about/i.html - галерея изображений
Примечание:функции getBodyScrollTop(), getBodyScrollLeft(), getClientWidth(), getClientHeight() взяты здесь:
http://www.tigir.com/javascript.htmОсобенности:1. Предполагаемая кроссбраузерность:
IE5,5+
Mozilla 1.0+
Chrome
Opera 7+
2. Проверенная кроссбраузерность:
IE5,5+
Mozilla 1.0+
Chrome
Opera 9.62
Варианты дополнительного исследования:
1. Доработка для блоков, ширина и высота которых заранее неизвестнa
2. анализ работы в неуказанных браузерах, попытка расширить возможности для тех, в которых сейчас не работает
Жду критических замечаний и предложений по данному вопросу, а также, по возможности, данных о совместимости
