[Javascript] Lightboxの作成

数年前からWebページ上の縮小画像等をクリックすると、同一画面上に拡大画像が表示され、拡大画像を閉じると元の画面に戻る機能が色んなサイトで一般的に使われるようになりました。
この機能をLightbox（ライトボックス）と呼ぶそうですが、プログラミング好きとして興味本位で独自に作ってみました( ￣▽￣)ﾉ
しかも画像だけでなく外部サイトの表示もできるようなものとして、以下のリンク文字列をクリックすると、同一画面上にリンク先の中身を表示し、黒半透明背景をクリックすると元の画面に戻ります。
対応ブラウザは、IE(6以降)、Chrome、Firefox、Safari等でたぶん動くと思います。（何かと抜けはあるだろうけど）

---

画像1
画像2
画像3
Yahoo!
YouTube

---

ソースコードは、次の通り。

<style type="text/css"><!--
html {width:100%; height:100%;}
body {margin:0px; height:100%;}
#lightbox {visibility:hidden; position:absolute; top:0px; left:0px; width:100%; height:100%;}
#lightbox .back {width:100%; height:100%; background-color:black; filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75;}
#lightbox .front {display:table; position:absolute; top:0px; left:0px; width:100%; height:100%;}
#lightbox .front .inner {display:table-cell; vertical-align:middle; text-align:center; height:100%;}
#lightbox .front .inner iframe {background-color:#fff;}
--></style>
<script type="text/javascript"><!--
function max(x,y)	{return (x < y) ? y : x;}
function getWindowHeight()	{return (window.innerHeight) ? window.innerHeight : ((document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.clientHeight);}
function getPageHeight()	{return max((window.innerHeight && window.scrollMaxY) ? (window.innerHeight + window.scrollMaxY) : ((document.body.scrollHeight > document.body.offsetHeight) ? document.body.scrollHeight : document.body.offsetHeight), getWindowHeight());}
function getPagePosY()	{return (window.pageYOffset) ? window.pageYOffset : ((document.documentElement && document.documentElement.scrollTop ) ? document.documentElement.scrollTop  : ((document.body) ? document.body.scrollTop  : 0));}
function doLightbox(oThis, sTagName, nWidth, nHeight){
  var oLB = document.getElementById("lightbox");
  if(!oLB)document.body.appendChild(oLB = document.createElement("div"));
  oLB.setAttribute("id","lightbox");
  oLB.onclick = function(){oLB.style.visibility='hidden';}
  oLB.innerHTML = "<div class='back' style='height:" + getPageHeight() + "px !important;'></div>";
  oLB.innerHTML += "<table class='front' style='top:" + getPagePosY() + "px;'><td class='inner'><" + sTagName + (nWidth ? " width='" + nWidth + "'" : "") + (nHeight ? " height='" + nHeight + "'" : "") + " src=\"" + oThis.href + "\">" + ((sTagName == "img") ? "" : ("</" + sTagName + ">")) + "</td></table>";
  oLB.style.visibility = "visible";
  return false;
}
//--></script>

<a href="http://fjiblog.cocolog-nifty.com/img01.jpg" onclick="return doLightbox(this,'img');">画像1</a><br>
<a href="http://fjiblog.cocolog-nifty.com/img02.jpg" onclick="return doLightbox(this,'img');">画像2</a><br>
<a href="http://fjiblog.cocolog-nifty.com/img03.jpg" onclick="return doLightbox(this,'img');">画像3</a><br>
<a href="http://www.yahoo.co.jp" onclick="return doLightbox(this,'iframe','70%','70%');">Yahoo!</a><br>
<a href="http://www.youtube.com/" onclick="return doLightbox(this,'iframe','70%','70%');">YouTube</a><br>

※DOCTYPEの内容によっては正常動作しないこともあります。
上記と同じコードのhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_lightbox.html