Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:46.

閉じるまで他の操作をできなくするウインドウ(モーダルダイアログ)を開く

JavaScriptのopenメソッドを使えば、ブラウザで別ウインドウを開くことができます。その方法は、記事「サブウインドウを開く」で解説済みです。
しかし、openメソッドを使う方法では、「開いた別ウインドウ」を放置したまま他の操作も可能なので、不都合がある場合もあります。例えば、別ウインドウ側で「絶対に先に操作して欲しい」処理を書いている場合とか。
そんなときには、閉じるまで他の操作をできなくするウインドウ「モーダルダイアログ」を開くと良いでしょう。

例えば、以下のボタンをクリックすると、小さなウインドウ(モーダルダイアログ)が開きます。
その状態で、ブラウザの他のウインドウをクリックしてみても、操作が拒否されます。
開いたウインドウ(モーダルダイアログ)を閉じない限り、元の操作には戻れません。

ボタンクリックで表示された小さなウインドウを閉じるまで、このページには戻って来れません。

閉じるまで他の操作を拒否するモーダルダイアログの作り方

このモーダルダイアログの作り方はとても簡単で、サブウインドウを開く際に使ったopenメソッドの代わりに、showModalDialogメソッドを使えば良いだけです。引数に指定する情報はopenメソッドとは若干異なりますから、そのままメソッド名だけを置き換えるわけにはいきませんが。
記述方法は以下のような感じです。

showModalDialog( 開きたいURL , 渡したい変数 , ダイアログのオプション );

第1引数には、開いた別ウインドウで読み込みたいURLを指定します。
第2引数には、別ウインドウで開いた先に渡したいデータが(あれば)指定します。
第3引数には、ウインドウサイズ等のオプションを指定します。

例えば、冒頭の例では、以下のように記述しました。

showModalDialog("sample.html", "","dialogWidth: 400px; dialogHeight: 300px; center: yes;");

上記では、「sample.html」を、「中央に表示する横400(px)×縦300(px)のサブウインドウ」に表示させています。(第2引数は省略するため、空文字を指定しています。)
指定できるオプションの詳細は以下の通りです。上記のように、セミコロン記号「;」で区切って必要なだけ列挙します。

オプション(+記述例)説明記述例の意味
dialogWidth: 400px;ウインドウの横幅横幅400ピクセル
dialogHeight: 300px;ウインドウの高さ高さ300ピクセル
dialogTop: 100px;ウインドウ表示位置(上端からのピクセル数)上端から100ピクセル
dialogLeft: 120px;ウインドウ表示位置(左端からのピクセル数)左端から120ピクセル
center: yes;中央に表示するかどうか(yes/no)中央に表示する

私が試したところ、Firefoxでは「center」オプションが有効になりませんでした。
確実を期したい場合は、記事「画面の中央にサブウインドウを表示させる」で紹介した方法を使って、自力で計算した値を使って表示位置を指定した方が良いかも知れません。
なお、Internet Explorerに関しては、他にもオプションが用意されています。詳しくは、MSDNの「showModalDialog method」ページをご参照下さい。(^_^;)

さて、上記の例では、単に別ウインドウを表示しただけです。
しかし、わざわざ「他の操作を拒否する」ようモーダルダイアログの形で表示するからには、ダイアログ側で何らかの操作や処理を行いたいはずですよね。
その際、メインウインドウ(呼び出し側)とのデータのやりとりが必要になることが多いでしょう。
showModalDialogメソッドには、呼び出し元とのデータのやりとりをするための機能も用意されています。
その方法は、別途「データの受け渡しができるサブウインドウ(モーダルダイアログ)を開く方法」で解説していますので、併せてご参照下さい。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど