モーダルダイアログの表示

トップページ > javascript > モーダルダイアログの表示

初版2008/02/15：最終更新日2008/02/15

モーダルダイアログの表示

目次
・モーダルダイアログの表示・ソース・モーダルダイアログのソース・動作しないブラウザ・IEのモーダルダイアログのソース表示

モーダルダイアログの表示

モーダルダイアログを表示するにはwindow.showModalDialogメソッドを使用します。
モーダルダイアログの特徴は、呼び出し元がアクティブになることはありません。また表示サイズなどを第三引数で指定することが出来ます。

第一引数にはファイルパス、ファイル名を指定します。
第二引数にはwindowを指定します。
第三引数にはモーダルの表示サイズなどの設定を指定します。

モーダルからの戻り値は、window.returnValueにセットします。すると呼び出し元にその値が渡されます。
以下のボタンを押すとモーダルダイアログが表示されます。表示されたモーダルのどちらかのCLOSEボタンを押すと戻り値が表示されます。

ソース

<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function a(){
    var a = window.showModalDialog("./a.html",window,"");
    alert("戻り値 = " + a);
}
</script>
<input type="button" value="button" name="submit" onClick="a()">
</body>
</html>

モーダルダイアログのソース

<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function a(){
    window.returnValue="1";
    window.close();
}
function b(){
    window.returnValue="2";
    window.close();
}
</script>
<body>
    <input type="button" value="CLOSE1" name="submit" onClick="a()">
    <input type="button" value="CLOSE2" name="submit" onClick="b()">
</body>
</html>

動作しないブラウザ

IE8やChrome 23.0.1271.97 mではモーダルダイアログは動作しません。普通の別ウィンドウのようになります。
simple modalを使用すればChromeなどでもモーダルで表示できるようになります。

IEのモーダルダイアログのソース表示

IEのモーダルダイアログで右クリックするとソース表示することができません。
これをキャッシュを利用してモーダルダイアログのソースを表示することが可能です。
モーダルダイアログをオープンし、ctrl + pを押下します。「印刷」画面が表示されますが、表示されている間、以下の場所にテンポラリファイルがhtml形式で保存されます。
以下はWindows7Proで確認しています。

C:¥Users¥Moriy¥AppData¥Local¥Temp

HOME