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

投稿日: 2013年1月13日 2019年4月12日
投稿者: kerupani
カテゴリー: ●My メモ

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

2013/02/01追記 : 新バージョンが公開されています https://archive.kerupani129.net/blog/posts/【html-javascript-css】-firefox-風-擬似-dialog-表示【ver-2-0】/

想像以上に作成に時間がかかってしまいました…。

本当は内容のサイズによってサイズ可変のダイアログが作りたかったのですが、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"></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;
}