Часто веб-мастера используют блоки с абсолютным позиционированием для реализации диалоговых окон. Чтобы такой блок расположить по центру экрана в независимости от разрешения можно воспользоваться следующими формулами:
left = (ширина_рабочей_области_браузера / 2) - (ширина_блока / 2)
top = (высота_рабочей_области_браузера / 2) - (высота_блока / 2)
Взгляните на реализацию:
<!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> <title>Page</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <style type="text/css"> body {height:2000px;} #layer1 {width: 300px; height: 200px; background: #aaa; position: fixed; left: 100px; top: 100px; display: none;} #capt1 {text-align: right;} </style> </head> <body> <script type="text/javascript"> function show() { var block = document.getElementById('layer1'); block.style.display = 'block'; block.style.left = parseInt(document.documentElement.clientWidth)/2 - parseInt(block.offsetWidth)/2 + "px"; block.style.top = parseInt(document.documentElement.clientHeight)/2 - parseInt(block.offsetHeight)/2 + "px"; } function hide() { document.getElementById('layer1').style.display = 'none'; } </script> <a href="javascript:show()">Вызвать</a> <div id="layer1"> <div id="capt1"> <a href="javascript:hide()">Закрыть</a> </div> </div> </body> </html>
Обратите внимание на строки 7, 8, 18, 19. Во-первых, для того, чтобы принудительно отобразить вертикальную полосу прокрутки, задана высота body. Блоку задан стиль position со значением fixed. Его действие аналогично absolute, за исключением того, что положение элемента не зависит от прокрутки веб-страницы. Строки 18, 19 — реализация формул расчета положения блока. Java-Script функция parseInt в нашем случае отбросит из значений стилей "px", оставив лишь числовые составляющие, которые нам и нужны для выполнения математических действий.
