Back to the article

Original script

The issues:

  1. when the page scrolls, the overlay jitters
  2. when the window is resized, the overlay jumps
  3. when the overlay is taller than the viewport, part of it is not accessible

Script

/**
* Center event handler used for centering on scroll/resize, but only if
* the Overlay is visible
* @method doCenterOnDOMEvent
*/
doCenterOnDOMEvent: function () {
  if (this.cfg.getProperty("visible")) {
    this.center();
  }
},

/**
* Centers the container in the viewport.
* @method center
*/
center: function () {
  var scrollX = Dom.getDocumentScrollLeft(),
  scrollY = Dom.getDocumentScrollTop(),
  viewPortWidth = Dom.getClientWidth(),
  viewPortHeight = Dom.getClientHeight(),
  elementWidth = this.element.offsetWidth,
  elementHeight = this.element.offsetHeight,
  x = (viewPortWidth / 2) - (elementWidth / 2) + scrollX,
  y = (viewPortHeight / 2) - (elementHeight / 2) + scrollY;
  this.cfg.setProperty("xy", [parseInt(x, 10), parseInt(y, 10)]);
  this.cfg.refireEvent("iframe");
},