元ネタ
こちらを参考に同じことをしたのですが、少し改良しました。
改良点
-
ダイアログが画面の中心に表示されるようにしました。
-
名前空間として定義したdialogオブジェクトにすべての処理をいれました。
-
CSSをJSで定義できるようにしました。いろんなデザインのダイアログを表示させることができます。外部CSSがよい人は関数でIDを書き換えて複数のデザインのダイアログを表示させられるでしょう。
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#content {
padding:10px;
}
</style>
<script type="text/javascript">
// ダイアログオブジェクト
var dialog = {};
// デフォルト値を設定
dialog.setDefault = function() {
dialog.width = 400;
dialog.height = 300;
dialog.body = 'テスト';
dialog.bodyStyle =
'padding:10px;'+
'border-radius: 6px 6px 6px 6px;'+
'background-color: #FFF;'+
'box-shadow: 6px 6px 6px rgba(0,0,0,0.4);';
dialog.backStyle =
'background-color: #000;'+
'opacity: 0.5;';
dialog.closeButtonHtml =
'<button onclick="dialog.close()" style="float:right;margin:10px;">閉じる</button>'
dialog.backId = 'dialog_back';
dialog.bodyId = 'dialog_body';
};
dialog.show = function() {
// 画面の高さを取得
var getBrowserHeight = function() {
if ( window.innerHeight ) {
return window.innerHeight;
} else if ( document.documentElement &&
document.documentElement.clientHeight != 0 ) {
return document.documentElement.clientHeight;
} else if ( document.body ) {
return document.body.clientHeight;
}
return 0;
}
dialog.left = (window.innerWidth - dialog.width) / 2;
dialog.top = (window.innerHeight - dialog.height) / 2;
var px = function(value) {
return value.toString() + 'px';
};
var styleRect = function(left, top, width, height) {
return 'left:' + px(left)
+ ';top:' + px(top)
+ ';width:' + px(width)
+ ';height:' + px(height) + ';'
};
var dialogBackStyle = function() {
var result = '';
result += 'height:' + px(getBrowserHeight()) + ';';
result += 'position:absolute;';
result += 'top:0px;';
result += 'left:0px;';
result += 'width:100%;';
result += dialog.backStyle;
return result;
};
var dialogBodyStyle = function() {
var result = '';
result += 'position:absolute;';
result += dialog.bodyStyle;
result += styleRect(dialog.left, dialog.top, dialog.width, dialog.height);
return result;
};
var html = document.getElementById("content").innerHTML +
'<div id="dialog">' +
'<div id="' + dialog.backId + '" style="' + dialogBackStyle() + '"></div>' +
'<div id="' + dialog.bodyId + '" style="' + dialogBodyStyle() + '">' +
dialog.body +
dialog.closeButtonHtml +
'</div>' +
'</div>';
document.getElementById("content").innerHTML = html;
};
// ダイアログを閉じる
dialog.close = function() {
var delNode = document.getElementById("dialog");
delNode.parentNode.removeChild(delNode);
};
var dialogShowType1 = function() {
dialog.setDefault();
dialog.show();
};
var dialogShowType2 = function() {
dialog.setDefault();
dialog.width = 100;
dialog.height = 100;
dialog.body = 'abc<b>def</b>ghi';
dialog.closeButtonHtml =
'<button onclick="dialog.close()" style="float:right;margin:10px;">×</button>'
dialog.show();
};
</script>
</head><body>
<div id="content">
ダイアログ表示サンプル
</div>
<input type="button" onclick="dialogShowType1()" value="ダイアログ表示">
<br>
<input type="button" onclick="dialogShowType2()" value="ダイアログ表示">
</body></html>
