モーダル

モーダルダイアログ (Web)

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

仕様書

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

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

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

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

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

[33] かつて IEVBScriptMsgBox 関数も実装していました。

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

モーダル性

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

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

pause も参照。

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

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

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

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

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

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

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

レンダリング

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

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

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

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

[23] alertconfirmprompt では、スクリプトに指定された文字列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] モーダルダイアログ表示に伴う pause 中、特に他の閲覧文脈でのモーダルダイアログ表示中は、 そのことがわかるような UI とするのが好ましいと考えられます。

[245] 実装によっては、pause 中、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] 最近 WindowsChromeモーダルダイアログ表示の時に表示元の画面上の位置が再配置?されるようになったみたいで勝手に移動されてすっごい不便。。。