Автор Тема: Размещение блока (div) по центру видимой части окна браузера  (Прочитано 11248 раз)

Марахтанов Алексей

  • Администратор
  • Постоялец
  • *****
  • Сообщений: 205
    • marahtanov.ru
Предлагается решение следующей задачи:

Есть блок <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. анализ работы в неуказанных браузерах, попытка расширить возможности для тех, в которых сейчас не работает


Жду критических замечаний и предложений по данному вопросу, а также, по возможности, данных о совместимости
« Последнее редактирование: 31 Декабрь 2008, 12:18:14 от Марахтанов Алексей »

denisisaych

  • Новичок
  • *
  • Сообщений: 7
  • 0 errors, 0 warnings
В Opera 9.64 блок прилипает к низу страницы…
RTFM