Positionner une boîte de dialogue au centre de la zone visible d'une fenêtre de navigateur en utilisant javascript/DOM

Question

Je dois positionner une boîte de dialogue (lire div) dans le centre de la zone visible d'une fenêtre de navigateur. Je dois utiliser DOM javascript pour cela - utiliser scrollHeight, scrollTop, clientHeight, etc. est autorisé. La boîte de dialogue doit apparaître en cliquant sur un lien, elle reste invisible sinon.

NE PEUT PAS UTILISER JQUERY POUR CRÉER UN DIALOGUE MODAL.

quelqu'un peut me aider avec la partie de centrage de ce problème

Cordialement

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

Voici comment centrer avec succès une boîte de dialogue, quelle que soit la position dans le document:

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;