javascript/DOMを使用してブラウザウィンドウの表示可能領域の中心にダイアログボックスを配置

Question

ブラウザウィンドウの表示可能領域の中心にダイアログボックス（divを読み込む）を配置する必要があります。私はこれを行うためにjavascript DOMを使用する必要があります - scrollHeight、scrollTop、clientHeightなどを使用することは許可されています。 リンクをクリックするとダイアログボックスが表示される必要があります。それ以外の場合は表示されません。

モーダルダイアログを作成するのにJQUERYを使用できません。

誰かがこの問題の中心部分で私を助けることができる

よろしくここ

Answer 1

(function() { 
    var getVieportWidth, 
     getViewportHeight; 

    if (window.innerWidth) { 
    // All browsers except IE 
    getViewportWidth = function() { return window.innerWidth; }; 
    getViewportHeight = function() { return window.innerHeight; }; 
    } 
    else if (document.documentElement && document.documentElement.clientWidth) { 
    // IE6 with DOCTYPE 
    getViewportWidth = function() { return document.documentElement.clientWidth; }; 
    getViewportHeight = function() { return document.documentElement.clientHeight; }; 
    } 
    else if (document.body.clientWidth) { 
    // IE4, IE5, IE6 without DOCTYPE 
    getViewportWidth = function() { return document.body.clientWidth; }; 
    getViewportHeight = function() { return document.body.clientHeight; }; 
    } 

    var dialogDIVNode = document.getElementById('someID'), 
     dialogDIVNodeWidth = dialogDIVNode.offsetWidth, 
     dialogDIVNodeHeight = dialogDIVNode.offsetHeight; 

    document.getElementById('someLinkID').addEventListener('click', function (e) { 
    e.preventDefault(); 

    dialogDIVNode.style.left = (getViewportWidth()/2 - dialogDIVNodeWidth/2) + 'px'; 
    dialogDIVNode.style.top = (getViewportHeight()/2 - dialogDIVNodeHeight/2) + 'px'; 
    dialogDIVNode.style.display = 'block'; 
    }, false); 
}()); 

Answer 2

が正常にかかわらず、文書内の位置の、ダイアログボックスをセンタリングする方法である：

dialogue.style.left = window.innerWidth - (window.innerWidth - dialogue.offsetWidth)/2 
         - dialogue.offsetWidth + pageXOffset; 

dialogue.style.top = window.innerHeight - (window.innerHeight - dialogue.offsetHeight)/2 
        - dialogue.offsetHeight/2 + pageYOffset;