入力ダイアログ画面ぽいもの

job

lightbox風の入力ダイアログを作りたかったので。適当に動く感じです。（IE6.0/Firefox2.0.0.13）
prototype.jsを使っています。（バージョン：1.6.0.2）


以下の内容を「test.js」という名前で保存。



function execSomething(frm){

  closeDialog();

  frm.submit();

}

function openDialog() {

  setOverlay("inline");

}

function closeDialog(){

  setOverlay("none");

}

function setOverlay(state){

  scrollTo(0, 0);

  var selectdisplay = "inline";

  if (state != "none") selectdisplay = "none";

  $A(document.getElementsByTagName("select")).each(function(obj){

    obj.style.display = selectdisplay;

  });

  $("overlay").style.display=state;

  setMaxSizeOverlay();

  $("lightbox").style.display=state;

}

function setMaxSizeOverlay() {

  var obj = $("overlay");

  if (obj) {

    if (obj.style.display != "none") {

      obj.style.height = "100%";

      obj.style.width = "100%";

      var h = 0;

      if (h < document.body.scrollHeight) h = document.body.scrollHeight;

      if (h < document.documentElement.scrollHeight) h = document.documentElement.scrollHeight;

      obj.style.height = h;

      var w = 0;

      if (w < document.body.scrollWidth) w = document.body.scrollWidth;

      if (w < document.documentElement.scrollWidth) w = document.documentElement.scrollWidth;

      obj.style.width = w - 21;

    }

  }

}

Event.observe(window, 'load', function(){

  setMaxSizeOverlay();

}, false);

/*

 * for IE6

 */

(function() {

  window.onresize = function() {

    setMaxSizeOverlay();

  }

})();


さらに、以下の内容を「test.css」という名前で保存。


div#lightbox{

  display: none;

  position: absolute;

  top: 30%;

  left: 30%;

  z-index: 9999;

  height: auto;

  width: auto;

  border: 2px solid #99cbd5;

  background: #ffffff;

  text-align: left;

  padding-top: 40px;

  padding-bottom: 40px;

  padding-left: 50px;

  padding-right: 50px;

}

div#overlay{

  display: none;

  position: fixed !important;

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 5000;

  background-color: #99cbd5;

  -moz-opacity: 0.5;

  opacity: .50;

  filter: alpha(opacity=50);

}


htmlはこんな感じです。

<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/test.css" />
<script src="./js/prototype.js" type="text/javascript"></script>
<script src="./js/test.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="button" value="ダイアログ" onclick="openDialog();" />
<div id="overlay"></div>
<div id="lightbox">
<div style="color: #003366; margin-bottom: 20px;">
なんか適当に入力して実行ボタンを押してください。
</div>
<input type="text" name="conddate" id="conddate" value="" />
<input type="button" value="実　行" onclick="execSomething(this.form);" />
<input type="button" value="戻　る" onclick="closeDialog();" />
</div>
</div>
</form>
</body>
</html>



IEだとselectが前に出てきちゃうので、強制的に非表示にしています。
なんでか分かりませんが、Firefoxだと入力フィールドにカーソルバーが表示されないです。入力はできます。（どうも「position: fixed;」が悪いらしい。でもFirefoxの場合のスクロールしてる画面全体の高さの取り方が分からないのです。うううう。）
あと、ほんとはスクロールバーの幅は固定じゃなくてちゃんと取りたいのですが、取り方がよく分かりません。とりあえず「21」で。（ひどい。）