Positionieren Sie ein Dialogfeld, in der Mitte des sichtbaren Bereichs eines Browserfensters mit Hilfe von JavaScript / DOM

Question

Ich brauche ein Dialogfeld (lesen div) in der Mitte des sichtbaren Bereichs eines Browser-Fensters zu positionieren. Ich brauche diese Javascript DOM verwenden, um zu tun - die Nutzung von Scrollheight, scrollTop, client etc. zulässig ist. Das Dialogfeld Bedürfnisse erscheinen auf einen Link zu klicken, bleibt sie unsichtbar sonst.

CAN NOT USE JQuery einen modalen Dialog werden.

Kann jemand mir helfen, mit dem Zentrierteil dieses Problems

Viele Grüße

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

Hier ist, wie erfolgreich ein Dialogfeld zu zentrieren, unabhängig von der Position im Dokument:

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;