JavaScriptでモーダルダイアログを表示するには「showModalDialog()」を使用しますが、その表示したダイアログを画面の中央に表示します。
モーダルダイアログを画面中央に表示
JavaScriptでモーダルダイアログを表示するには「showModalDialog()」を使用しますが、その表示したダイアログを画面の中央に表示します。
showModalDialog()の呼び出し側ソース
showModalDialog()を呼び出す側のソースは以下のようになります。
<html>
<head>
<title>メインウインドウ</title>
<script type="text/javascript">
function onDspSub()
{
showModalDialog( "child.html", "", "dialogHeight:300px;dialogWidth:800px;center=1");
}
</script>
</head>
<body>
<input type="button" value="サブウィンドウを表示" onClick="javascript:onDspSub();" />
</body>
</html>
ボタンの「onClick」イベントでダイアログを表示する関数を呼び出します。
showModalDialog()の呼ばれる側ソース
showModalDialog()で呼ばれる側のソースは以下のようになります。
<html>
<head>
<title>サブウインドウ</title>
<script type="text/javascript">
function onCloseSub()
{
window.close() ;
}
</script>
</head>
<body>
<input type="button" value="サブウィンドウを閉じる" onclick="javascript:onCloseSub();" />
</body>
</html>
普通のHTMLページです。
モーダルダイアログを画面の中央に表示する
モーダルダイアログを画面の中央に表示するには３番目の引数に「center=1」を指定します。
これでモーダルダイアログが画面の中央で表示されます。
また、「dialogHeight」や「dialogWidth」はモーダルダイアログの高さや幅を指定する際に利用し、それぞれのパラメータを「;」でつないで複数指定することができます。
showModalDialog()への利用できる引数
showModalDialog()へは以下の引数が指定できます。
| パラメータ名 | 型 | 説明 |
|---|---|---|
| dialogWidth | 数値。単位必須 | ダイアログの横幅 |
| dialogHeight | 数値。単位必須 | ダイアログの縦幅 |
| dialogLeft | 数値。単位必須 | ダイアログのX座標 |
| dialogTop | 数値。単位必須 | ダイアログのY座標 |
| center | 真偽値 | ダイアログを画面の中央に表示（dialogLeft,dialogTopが指定すると、無効 |
| status | 真偽値 | ダイアログのステータスバーを表示す |
| scroll | 真偽値 | （内容がダイアログのサイズより大きい場合に）スクロールバーを表示 |
| resizable | 真偽値 | サイズを変更可能にする |
| help | 真偽値 | ヘルプボタンを表示 |
| minimize | 真偽値 | 最小化ボタンを表示 |
| maximize | 真偽値 | 最大化ボタンを表示 |
注意事項
呼び出される側のダイアログ画面でウィンドウの高さや幅、表示位置などを初期処理で設定すると呼び出す側で指定した値が無効になりますので、注意が必要です。
