[2] モーダルダイアログmodal dialogは、 モーダルに、すなわち利用者に他の処理を認めない状態で表示されるダイアログです。 本項では Web におけるモーダルダイアログについて扱います。

仕様書

モーダルダイアログの一覧

[3] Web には次の著者によるモーダルダイアログが存在します。

[4] 最初の3つは Netscape Navigator の JavaScript に初期から含まれていたものです。 次の3つは IE が実装し、他の Webブラウザーも追随しました。 これらはいずれも HTML Standard によって初めて標準化されました。 イベントループの pause (最初の5つ) やスピン (showModalDialog) を伴う、今日こんにちから見ると特殊な仕組みを採用しています。

[5] dialog 要素は HTML Standard によって追加されたもので、 CSS などによる近代的な仕組みで実現されていて、 イベントループの特殊な制御を伴いません。

[7] 利用者エージェントには他にも次のモーダルダイアログが存在します。

  • HTTPS と素のHTTP をまたいだ移動 Mixed Content
  • [33] かつて IE は VBScript の MsgBox 関数も実装していました。
  • プラグインもモーダルダイアログを表示できたと思われます。

[13] イベントループは、 termination nesting level を持ちます >>12。 その初期値は0です >>12。 この値は、 beforeunload イベントや unload イベントの処理中には正になります。 この値が正の時、 window.open、 alert()、prompt()、 confirm()、showModalDialog は何もしなくて良いことになっています。

モーダル性

[6] かつてはモーダルダイアログによってWebブラウザー全体がブロックされるのが普通でしたが、 徐々に緩和され、 タブや関係する類似起源閲覧文脈の単位の範囲のみでブロックされるようになってきています。

[14] 最近の Webブラウザーは、モーダルダイアログの表示中は関係する閲覧文脈を半透明の黒色で上から塗るなど、 入力を受け付けていないことを明確化する方法でレンダリングするようになっています。

pause も参照。

[51] 閲覧文脈は操作不能でも、その周囲のアドレスバーなどの利用者インターフェイスは利用可能なのが現在では普通です。

[52] また、タブや窓を切り替えて、関係しない閲覧文脈はまったく通常通りに利用可能なのが現在では普通です。

[53] 無関係の閲覧文脈がそちらのモーダルダイアログを同時に表示することもあり得ます。 その場合はそれぞれがまったく独立して動作します。

[37] Webブラウザーは固定状態を解除をしないといけないかもしれませんが、 仕様書に明記されておらず不明です。

モーダルダイアログの停止

[9] ブラクラ目的等利用者にとって迷惑なモーダルダイアログの利用を防ぐため、 最近の Webブラウザーはモーダルダイアログの過度な表示を抑制する機能が備わっています。

[10] 例えば Webブラウザーによっては、複数回同じモーダルダイアログが表示された時に以後表示しないチェックボックスを表示します。

[11] 例えば Webブラウザーによっては、モーダルダイアログが表示された時に利用者がスクリプトの中断を指示できることがあります。

[18] 砂箱化時に allow-modals キーワード >>17 が指定されなければ、砂箱化フラグ集合の sandboxed modals flag >>16 が設定されます。このフラグが設定されていれば、 モーダルダイアログは表示されません。

[19] ただし認証のモーダルダイアログと dialog 要素のダイアログは、本フラグの適用対象にはなっていません。

レンダリング

[20] alert、 confirm、prompt では、 スクリプトが指定した文字列をダイアログに表示することが期待されています。

[22] HTTP認証ダイアログでも、 realm を表示することが期待されています。

[46] 改行である CR、 LF、 CRLF はいずれも LF に正規化されて表示されます。 >>1

[25] 文字列や既定値のレンダリングの際には bidi アルゴリズムにおいては段落群の独立した集合であって、 U+000A の改段落挙動などを含むものとして扱うことが期待されます。 段落レベルの決定においては P2、P3 の高級overrideはありません。 >>24

[23] alert、 confirm、prompt では、スクリプトに指定された文字列に optionally truncate a simple dialog string >>26 を適用したものをダイアログに表示することとなっています。 明文規定はありませんが、趣旨からすると realm の表示も同様と思われます。

[32] prompt においてはその既定値にも optionally truncate a simple dialog string を適用することとなっています >>26。

[28] すなわち、与えられた文字列か、何らかの方法でその文字列から得たそれより短い文字列を使います >>26。この時、利用者エージェントは省略部分を表示するための利用者インターフェイスを提供するべきではありません >>26。

[30] 具体的には、例えば先頭100文字だけ表示することにしても構いませんし、 途中の部分を「・・・」に差し替えても構いません。 >>26

[29] 全文表示する方法を提供するべきではないのは、 「重要なセキュリティーの警告!!! 詳しくは「続きを読む」をクリック!」 のような spoofing を避けるため >>26 と説明されています。[31] 具体的な制限を設けずに全体を読む方法を提供しないのは、 実装によって読める範囲が違って一部利用者に不便を強いる結果になりかねない気がしますが...

[21] その他ダイアログに表示される(べき)項目については、 各ダイアログの項を参照。

[244] モーダルダイアログ表示に伴う pausepause (event loop) 中、特に他の閲覧文脈でのモーダルダイアログ表示中は、 そのことがわかるような UI とするのが好ましいと考えられます。

[245] 実装によっては、pausepause (event loop) 中、viewport 全体を半透明の黒で隠し、 フォーカスが与えられると直ちにモーダルダイアログにフォーカスを移動します。

[47] かつては beforeunload のダイアログでも著者指定の文字列が同様の方法でレンダリングされることになっていましたが、 廃止されました。 beforeunload

メモ

[8] Part2 - browsersec - Browser Security Handbook, part 2 - Browser Security Handbook - Google Project Hosting ( 版) https://code.google.com/p/browsersec/wiki/Part2#Popup_and_dialog_filtering_logic

[15] Block modal dialogs by default in sandboxed documents · whatwg/html@bbccfc9 ( 版) https://github.com/whatwg/html/commit/bbccfc976754def0c187ac8ce5891d2fb20dfc15

[27] Allow truncation of alert/confirm/prompt text · whatwg/html@56f5c5e ( 版) https://github.com/whatwg/html/commit/56f5c5e39b8b43b4bd4a8007fdc56ad797a5b2a7

[34] Project OldSpice - Google ドキュメント ( 版) https://docs.google.com/document/d/1wtV5rmLhbf1OZkbg7crtCt6h1mMtig_ctTQt3BLLEIU/edit?pref=2&pli=1

[35] Use the Window's associated Document for allow-modals sandbox checks (domenic著, ) https://github.com/whatwg/html/commit/29ebd5b6e8c4ba4006115a784c5c6c87dc151489

[36] document handling: invoke user prompt handler implicitly when executi… (andreastt著, ) https://github.com/w3c/webdriver/commit/16dba3131d4b544b6ed4c6203af621294413ee4f

[38] Chromium policy on JavaScript dialogs  |  Web  |  Google Developers ( ()) https://developers.google.com/web/updates/2017/03/dialogs-policy

[39] Chrome incompatibilities - Mozilla | MDN () https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities

Firefox does not support using alert(), confirm(), or prompt() from background pages.

[40] 160144 - Replace POSTDATA dialog with better UI (post form resubmit warning) () https://bugzilla.mozilla.org/show_bug.cgi?id=160144

[41] Deprecate alert(), confirm(), prompt() · Issue #2894 · whatwg/html () https://github.com/whatwg/html/issues/2894

[42] Project OldSpice - Google ドキュメント () https://docs.google.com/document/d/1wtV5rmLhbf1OZkbg7crtCt6h1mMtig_ctTQt3BLLEIU/edit

[43] Remove the pending dialog stack in favor of the top layer (domenic著, ) https://github.com/whatwg/html/commit/ea14be5f8cdbab1598b4000887bd6990c039aaff

[44] New in Chrome 63  |  Web  |  Google Developers () https://developers.google.com/web/updates/2017/12/nic63?utm_source=feed&utm_medium=feed&utm_campaign

[45] Treat CR, LF, CRLF the same for alert/confirm/prompt (domenic著, ) https://github.com/whatwg/html/commit/76638126838951c21aee4a1220cd0a4e57f3081d

[48] Specify line-breaking behavior of dialogs · Issue #4094 · whatwg/html () https://github.com/whatwg/html/issues/4094

[49] Treat CR, LF, CRLF the same for alert/confirm/prompt by domenic · Pull Request #4105 · whatwg/html () https://github.com/whatwg/html/pull/4105

[50] 最近 Windows の Chrome はモーダルダイアログ表示の時に表示元の窓の画面上の位置が再配置?されるようになったみたいで勝手に移動されてすっごい不便。。。