第51回 「モーダルダイアログを使う」
今回はモーダルダイアログについて説明します。
モーダルダイアログはサブウィンドウの親戚のようなもので似ている部分が多くあります。まず、モーダルダイアログを開くには以下のように書きます。
showModalDialog(URL);
URLの部分にモーダルウィンドウに表示するHTMLファイルなどを指定します。例えばsub.htmlファイルを表示させるのであれば以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function mdlg()
{
showModalDialog("sub.html");
}
// --></script>
</head>
<body>
<a href="javascript:mdlg()">ダイアログを開く</a><br>
</body>
</html>
モーダルダイアログもサブウィンドウと同様に指定した横幅と縦幅で開くことができます。ただし、サブウィンドウとは違うパラメータと単位を指定します。
dialogWidth:横幅
dialogHeight:縦幅
サブウィンドウの時にはwidth,heightでしたがモーダルダイアログではdialogWidth,dialogHeightを使います。また指定する幅はピクセルだけでなくcmやptなどスタイルシートで利用できる単位を使うことができます。サブウィンドウ同様にピクセルで指定する場合には数字の末尾にピクセルを示す単位であるpxをつけます。
以下のプログラムは320 x 240ピクセルでモーダルダイアログを表示させるものです。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function mdlg()
{
showModalDialog("sub.html","","dialogWidth:320px;dialogHeight:240px");
}
// --></script>
</head>
<body>
<a href="javascript:mdlg()">320x240サイズでダイアログを開く</a><br>
</body>
</html>
モーダルダイアログも表示する位置を指定できます。ただしMac版のInternet Explorer 5では位置指定は無効となり画面中央に表示されます。
位置指定は以下のものを使います。
dialogLeft:Ｘ座標
dialogTop:Ｙ座標
指定できる単位は横幅、縦幅で使えるものと同じです。例えばＸ座標が10ピクセル、Ｙ座標が100ピクセルの位置にモーダルダイアログを表示させるには以下のようになります。
<html>
<head>
<title></title>
<script language="JavaScript"><!--
function mdlg()
{
showModalDialog("sub.html","","dialogLeft:10px;dialogTop:100px;dialogWidth:320px;dialogHeight:240px");
}
// --></script>
</head>
<body>
<a href="javascript:mdlg()">320x240サイズでダイアログを開く</a><br>
</body>
</html>
モーダルダイアログは使い方によっては大変便利なものです。例えばパスワードを入力しないと次のページに進めないようにする事も可能です。が、モーダルダイアログでパスワードを入力して、それが正解かどうかを親ウィンドウに知らせたい場合、モーダルダイアログで処理を行って、それを親ウィンドウに戻したい場合は、どうしたら良いのでしょうか。全てモーダルダイアログ内で処理できれば良いかもしれませんが、そうでない場合は困ってしまいます。
次回はモーダルダイアログから親ウィンドウにデータを渡す方法について説明します。