【HTML/JavaScript/CSS】 Firefox 風 擬似 dialog 表示【サンプル】

【HTML/JavaScript/CSS】 Firefox 風 擬似 dialog 表示【サンプル】

想像以上に作成に時間がかかってしまいました…。
本当は内容のサイズによってサイズ可変のダイアログが作りたかったのですが、HTMLとCSSだけでやると、ブラウザによって表示のされ方がバラバラになってしまい、時にはレイアウトが大幅に崩れるといった事態が発生したため、Java Script 側でサイズを決めてしまう形にしました。
sample.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" type="text/css" href="style.css" />
  <script type ="text/javascript" src="script.js"></script>
  <title>Firefox風dialog</title>
</head>
<body>
  <a href="javascript:dialog_switch(1);">dialog表示</a>
  
  <div id="firefox_dialog_back" onmousedown="return false;" oncontextmenu="return false;" onselectstart="return false;">
  <div style="clear:both;width:0px;height:0px;"><span style="display:none;">いわゆるひとつの空き要素</span></div>
  </div>
  <table id="firefox_dialog_form" onmousedown="return false;" oncontextmenu="return false;" onselectstart="return false;">
  <tr><td id="firefox_dialog_message">
  <div id="firefox_dialog_mesbox">
  message
  </div>
  </td></tr>
  <tr><td id="firefox_dialog_button">
  <input class="firefox_dialog_switch" value="OK" type="button" onClick="dialog_switch(0);"></input>
  </td></tr>
  </table>
  <script type ="text/javascript"><!--
  dialog_switch(0,240,144,'test');
  //--></script>
</body>
</html>

script.js

function dialog_switch(flag,xsize,ysize,message) {
  var h_obj=new Array(5);
  h_obj[0]=document.getElementById("firefox_dialog_back");
  h_obj[1]=document.getElementById("firefox_dialog_form");
  h_obj[2]=document.getElementById("firefox_dialog_message");
  h_obj[3]=document.getElementById("firefox_dialog_mesbox");
  h_obj[4]=document.getElementById("firefox_dialog_button");
  var _visibility=new Array("hidden","visible");
  var _size=new Array(2);
  var pageHeight=Math.max.apply(null,[document.body.clientHeight,document.body.scrollHeight,document.documentElement.scrollHeight,document.documentElement.clientHeight]);
  if((typeof(xsize)!=="undefined")&&(typeof(ysize)!=="undefined")) {
    if(xsize<240) {xsize=240;}
    if(ysize<144) {ysize=144;}
    _size[0]=pageHeight;
    h_obj[0].style.height=Math.floor(_size[0])+"px";
    _size[0]=-xsize/2;
    _size[1]=-ysize/2;
    h_obj[1].style.margin=Math.floor(_size[1])+"px 0px 0px"+Math.floor(_size[0])+"px";
    _size[0]=xsize;
    _size[1]=ysize;
    h_obj[1].style.width=Math.floor(_size[0])+"px";
    h_obj[1].style.height=Math.floor(_size[1])+"px";
    _size[0]=xsize-40-2;
    _size[1]=ysize-96-2;
    h_obj[3].style.width=Math.floor(_size[0])+"px";
    h_obj[3].style.height=Math.floor(_size[1])+"px";
  }
  if(typeof(message)!=="undefined") {
    h_obj[3].innerHTML=""+message;
  }
  for(cnt in h_obj) {
    h_obj[cnt].style.visibility=_visibility[flag];
  }
}

style.css

/* body */
html {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
}
/* id */
#firefox_dialog_back {
  visibility:hidden;
  position:absolute;
  top:0;
  left:0;
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  min-height:100%;
  /* background-color:#939393; */
  background-color:#272727;
  filter:alpha(opacity=50); /* IE */
  -moz-opacity:0.5; /* Firefox,Netscape */
  opacity:0.5; /* Opera,Safari */
}
body > #firefox_dialog_back {
  height:auto;
}
#firefox_dialog_form {
  visibility:hidden;
  position:absolute;
  top:35%;
  left:50%;
  margin:-72px 0px 0px -120px;
  padding:0;
  width:240px;
  height:144px;
  border-collapse:separate;
  border-spacing:0;
  border:solid 1px #696969;
}
#firefox_dialog_message {
  visibility:hidden;
  margin:0;
  padding:0;
  background-color:#FFFFFF;
}
#firefox_dialog_mesbox {
  visibility:hidden;
  position:absolute;
  top:20px;
  left:20px;
  margin:0;
  padding:0;
  width:198px;
  height:46px;
  overflow-y:auto;
  line-height:14px;
  font-site:11px;
}
#firefox_dialog_button {
  visibility:hidden;
  text-align:right;
  margin:0;
  padding:0 26px;
  height:56px;
  background-color:#F2F2F2;
  border-top:solid 1px #E6E6E6;
}
/* class */
.firefox_dialog_switch {
  float:right;
  margin:0 3px;
  padding:0;
  width:74px;
  height:23px;
}

Internet Explorer 9/Firefox 18/Google Chrome 22 で表示確認を行いました。
Java Script が有効になっていないと動作しません。(当然ですが)
参考サイト
【HTML/JavaScript/CSS】 Firefox 風 擬似 dialog 表示【解説】 (サイズが大きすぎて1つの記事に収まりきらなかったので分割) 
ではではホームページのメインの部分を作ってきます~。
ではまたいつか~。
↓クリック (投票) お願いします~