にしし ふぁくとりー(西村文宏 個人サイト)

"JavaScript Tips Factory" : Presented by Nishishi. Since 1997.

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

JavaScriptのshowModalDialogメソッドを使って「閉じるまで他の操作をできなくする」タイプのサブウインドウ(モーダルダイアログ)を開く方法を解説。openメソッドを使って作るサブウインドウとは違って、一度開かれたウインドウはそれを閉じるまで他のブラウザ操作が拒否されます。(※既に廃止された仕様なので、今後は使えないブラウザが増す点に注意)

※非推奨:廃止済み

ここで紹介しているwindow.showModalDialogメソッドは、既に仕様から廃止されています。本稿執筆時点では、Firefox54ではまだ使用可能でしたが(将来的に廃止されることがアナウンスされています)、ChromeやEdgeでは使えません(IE11では動きますが)。したがって、もはや限定された環境でしか使えない点に注意して下さい。

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

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メソッドには、呼び出し元とのデータのやりとりをするための機能も用意されています。
その方法は、別途「データの受け渡しができるサブウインドウ(モーダルダイアログ)を開く方法」で解説していますので、併せてご参照下さい。

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

()

JavaScript TIPSふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報など

▼このページに関連しそうな記事が約8本くらい自動表示されています。(たぶん)

--- 当サイト内を検索 ---