JavaScript

[JavaScript] モーダルダイアログを使う(window.showModalDialog)

投稿日:2016年10月2日 更新日:

モーダルダイアログを使うには、window.showModalDialogを使用します。

※モーダルダイアログはセキュリティの観点から廃止の方向に向かってますので、 使用は非推奨です。

サンプルソース

例)親画面(main.html)から子画面(sub.html)をモーダル画面として開く

実行サンプル

↓ここに子画面で入力された値がセットされます。

 

※Chrome、Edge等では動きません。
(最新のブラウザではモーダルダイアログは廃止の方向に向かっています。)

解説

window.showModalDialogの引数には以下のもの指定します。

戻り値:ダイアログから呼び出し元へ返すデータが格納されたオブジェクト
第1引数:ダイアログに表示するページのURL ※必須
第2引数:ダイアログへ送るデータオブジェクト(変数名) ※省略可
第3引数:オプションパラメータ ※省略可
  • 第1引数のURLは、http://~で始まる絶対パスでも、./hoge.htmlのような相対パスでもどちらでも指定できます。
  • 第2引数に指定したオブジェクトをダイアログ側で参照できます。thisを指定しておけばダイアログからは呼出し元画面全てを参照できます。
  • 第3引数のオプションパラメータはウィンドウのサイズや表示の仕方などをセミコロン区切りで指定できます。指定できるパラメータは下記表をご覧ください。
【showModalDialogオプション】
プロパティ意味設定値既定値設定例
dialogWidth数値-600px
dialogHeight高さ数値-500px
dialogTop上位置数値-50px
dialogLeft左位置数値-50px
center画面中央に表示するかどうかyes/noyesyes
resizableリサイズの可/不可yes/nonono
scrollスクロールバーの表示/非表示yes/nonono
maximize最小化ボタンの表示/非表示yes/nonoyes
maximize最大化ボタンの表示/非表示yes/nonoyes
statusステータスバーの表示/非表示yes/nonono

※ yes/no で指定する項目は、1(=yes)または0(=no)でも指定可能です。

第2引数にthisを指定して開いたダイアログは、window.dialogArgumentsで親ウィンドウを参照できます。ダイアログから親画面へ値を渡したい場合は、以下のように記述します。

ダイアログを閉じたい場合は、window.close(); で閉じることができます。

その他メモ

  • showModalDialogはセキュリティの観点から問題が多く、GoogleChromeやSafari、Edge等のブラウザではデフォルトでは使用できなくなっています。これからは使わない方が良いでしょう。

スポンサーリンク

スポンサーリンク

-JavaScript
-

執筆者:



comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

スポンサーリンク