Back to the article

Modified script

Using negative margin, "position:fixed", some IE hacks and modifying "doCenterOnDOMEvent" make things smoother.
Note that if you choose to not implement the CSS expressions solution, IE 5 and 6 will act the same as they do with the original script, but without hiding part of the overlay when the viewport is not tall enough.

Click on the "show" button in both windows then scroll and/or resize the browser window to see how the overlays behave depending on the method used.

Script

/**
* Center event handler used for centering on scroll/resize, but only if
* the Overlay is visible and no taller than the viewport height
* @method doCenterOnDOMEvent
*/
doCenterOnDOMEvent: function () {
  var winHeight = eval(document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientHeight : document.body.clientHeight;
  if (this.cfg.getProperty("visible") && (this.element.offsetHeight < winHeight)) {
    this.center();
  }
},

/**
* Centers the container in the viewport.
* @method center
*/
center: function () {
  var elementWidth = this.element.offsetWidth,
    elementHeight = this.element.offsetHeight,
    viewportHeight = (document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientHeight : document.body.clientHeight;
  var highEnough = (viewportHeight > elementHeight);
  this.element.style.left = "50%";
  this.element.style.marginLeft = - (elementWidth / 2) + "px";
  if (typeof document.body.style.maxHeight == "undefined") {
    //uncomment the following statement if CSS expressions are not used
    //this.element.style.marginTop=(highEnough) ? - (elementHeight / 2) + Dom.getDocumentScrollTop() + "px" : "0";
  }else{
    //move this above the if statement if CSS expressions are not used
    this.element.style.top = (highEnough) ? "50%" : Dom.getDocumentScrollTop() + "px";
    this.element.style.marginTop = (highEnough) ? - (elementHeight / 2) + "px" : "0" ;
    (highEnough) ? this.element.style.position = "fixed" : this.element.style.position = "absolute";
  }
this.cfg.refireEvent("iframe");
},

CSS

<style type="text/css">
.yui-overlay {position:absolute;}
</style>
<!--[if IE 6]>
<style type="text/css">
html {background:url(nada);}
.yui-overlay {
margin-top: expression((documentElement.clientHeight > this.offsetHeight) ? - this.offsetHeight / 2 : - documentElement.scrollTop);
top: expression((documentElement.clientHeight > this.offsetHeight) ? documentElement.scrollTop + (documentElement.clientHeight / 2) : documentElement.scrollTop);
}
</style>
<![endif]-->
<!--[if IE 5]>
<style type="text/css">
.yui-overlay {
margin-top: expression((document.body.clientHeight > this.offsetHeight) ? - this.offsetHeight / 2 : - document.body.scrollTop);
top: expression((document.body.clientHeight > this.offsetHeight) ? document.body.scrollTop + (document.body.clientHeight / 2) : document.body.scrollTop);
}
</style>
<![endif]-->