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

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引数は省略するため、空文字を指定しています。)
指定できるオプションの詳細は以下の通りです。上記のように、セミコロン記号「;」で区切って必要なだけ列挙します。

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

表示したモーダルダイアログからデータを受け取りたい場合もある

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

※冒頭でも述べましたが、ここで紹介したwindow.showModalDialogメソッドは、既に仕様から廃止されています。もはや限定された環境でしか使えない点に注意して下さい。

(更新日：2017年06月16日)