Определяет центр экрана с учетом прокрутки страницы и выводит div в центре

Никаких дальнейших обработок не производиться. Это простой, учебный пример, который позволяет определить центр страницы, отступить от него на размер выводимого блока текста и спозиционировать DIV-блок по полученным координатам.

Исходный код этого примера:

<div id="helpLayer"
style="position:absolute;top:0px;left:0px;width:200;height:100px;color:red;border:red 1px solid;padding:5px;">
<br><br>
DIV-окно в центре экрана</div>

<script language="JavaScript">
var ua=function(){var o={ie:0,opera:0,gecko:0,webkit:0,mobile:null,air:0};
var ua=navigator.userAgent,m;
if((/KHTML/).test(ua)){o.webkit=1}
m=ua.match(/AppleWebKit\/([^\s]*)/);
if(m&&m[1]){o.webkit=parseFloat(m[1]);
if(/ Mobile\//.test(ua)){o.mobile="Apple"}else{m=ua.match(/NokiaN[^\/]*/);
if(m){o.mobile=m[0]}}m=ua.match(/AdobeAIR\/([^\s]*)/);
if(m){o.air=m[0]}}
if(!o.webkit){m=ua.match(/Opera[\s\/]([^\s]*)/);
if(m&&m[1]){o.opera=parseFloat(m[1]);
m=ua.match(/Opera Mini[^;]*/);if(m){o.mobile=m[0]}}else{m=ua.match(/MSIE\s([^;]*)/);
if(m&&m[1]){o.ie=parseFloat(m[1])}else{m=ua.match(/Gecko\/([^\s]*)/);
if(m){o.gecko=1;m=ua.match(/rv:([^\s\)]*)/);if(m&&m[1]){o.gecko=parseFloat(m[1])}}}}}return o}();

var isOpera = ua.opera,
    isSafari = ua.webkit, 
    isGecko = ua.gecko,
    isIE = ua.ie; 


function getCenter(){
  var root = (typeof document.compatMode != 'undefined')? document.documentElement : document.body;
  return {
    x: getViewportWidth()/2 + root.scrollLeft,
    y: getViewportHeight()/2 + root.scrollTop
  };
}

function getViewportHeight() {
    var height = self.innerHeight; // Safari, Opera
    var mode = document.compatMode;

    if ( (mode || isIE) && !isOpera ) { // IE, Gecko
        height = (mode == 'CSS1Compat') ?
                document.documentElement.clientHeight : // Standards
                document.body.clientHeight; // Quirks
    }

    return height;
}; 
      
function getViewportWidth() {
    var width = self.innerWidth;  // Safari
    var mode = document.compatMode;
    
    if (mode || isIE) { // IE, Gecko, Opera
        width = (mode == 'CSS1Compat') ?
                document.documentElement.clientWidth : // Standards
                document.body.clientWidth; // Quirks
    }
    return width;
};

function show(){
  var coord = getCenter();
  var layer  = document.getElementById('helpLayer');
  layer.style.left = Math.round(coord.x - 100) + "px";
  layer.style.top = Math.round(coord.y - 50) + "px";
  layer.style.display = 'block';
  return false;
}
onload=show;
</script>
Скопировать в буфер

© Copyright 2008-2012 by KDG