入力ダイアログ画面ぽいもの
投稿日: 2008-04-14 /
カテゴリー: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」で。（ひどい。）