Edit

Page

Page title:

Page body:

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

* 仕様書

[REFS[
- [1] '''[CITE@en-US-x-hixie[HTML Standard]] ([TIME[2014-04-03 03:44:44 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#user-prompts>'''
-- [26] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2016-02-21 07:50:23 +09:00]] 版) <https://html.spec.whatwg.org/#optionally-truncate-a-simple-dialog-string>
- [12] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-04-25 04:40:19 +09:00]] 版) <https://html.spec.whatwg.org/#termination-nesting-level>
- [17] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-09-08 18:15:51 +09:00]] 版) <https://html.spec.whatwg.org/#attr-iframe-sandbox-allow-modals>
- [16] [CITE@en-GB-x-hixie[HTML Standard]] ([TIME[2015-09-08 18:15:51 +09:00]] 版) <https://html.spec.whatwg.org/#sandboxed-modals-flag>
- [24] [CITE@en-US-x-hixie[HTML Standard]] ([TIME[2014-04-03 03:44:44 +09:00]] 版) <http://www.whatwg.org/specs/web-apps/current-work/#text-rendered-in-native-user-interfaces>
]REFS]

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

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

[FIG(short list)[
- [CODE(JS)@en[[[alert()]]]]
- [CODE(JS)@en[[[conform()]]]]
- [CODE(JS)@en[[[prompt()]]]]
- [CODE(DOMe)@en[[[beforeunload]]]]
- [CODE(JS)@en[[[window.print]]]]
- [DEL[[CODE(JS)@en[[[showModalDialog]]]]]]
- [CODE(HTMLe)@en[[[dialog]]]] [[要素]]の [CODE(DOMa)@en[[[openModal]]]]
- [[HTTP認証ダイアログ]]
- [[TLSクライアント認証]]
]FIG]

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

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

[7] [[利用者エージェント]]には他にも次の[[モーダルダイアログ]]が存在します。
[FIG(middle list)[
- [CODE(HTML)@en[[[<input type=file>]]]]
- [[非安全]]な [CODE(JS)@en[[[location.reload]]]]
- [CODE(JS)@en[[[window.close]]]] の確認
- [[お気に入りの追加]]
- 反応しないまたは遅いページを停止を提案するダイアログ
- [54] [[カーソル ブラウジング]]を有効にするかの確認 
([[Chrome]])
[TIME[2025-05-31T23:20:52.600Z]]

[HISTORY[

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

]HISTORY]

]FIG]

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

* モーダル性

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

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

;; [[pause]] も参照。

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

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

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

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

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

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

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

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

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

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

* レンダリング

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

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

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

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

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

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

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

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

;; [29] 全文表示する方法を提供するべきではないのは、
「重要なセキュリティーの警告!!! 詳しくは「続きを読む」をクリック!」
のような [[spoofing]] を避けるため [SRC[>>26]] と説明されています。

;; [31] 具体的な制限を設けずに全体を読む方法を提供しないのは、
実装によって読める範囲が違って一部[[利用者]]に不便を強いる結果になりかねない気がしますが...

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

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

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

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

* メモ

[8] [CITE[Part2 - browsersec - Browser Security Handbook, part 2 - Browser Security Handbook - Google Project Hosting]]
([TIME[2015-03-31 16:48:10 +09:00]] 版)
<https://code.google.com/p/browsersec/wiki/Part2#Popup_and_dialog_filtering_logic>

[15] [CITE@en[Block modal dialogs by default in sandboxed documents · whatwg/html@bbccfc9]] ([TIME[2015-09-09 23:54:45 +09:00]] 版) <https://github.com/whatwg/html/commit/bbccfc976754def0c187ac8ce5891d2fb20dfc15>

[27] [CITE@en[Allow truncation of alert/confirm/prompt text · whatwg/html@56f5c5e]]
([TIME[2016-02-21 13:07:00 +09:00]] 版)
<https://github.com/whatwg/html/commit/56f5c5e39b8b43b4bd4a8007fdc56ad797a5b2a7>

[34] [CITE[Project OldSpice - Google ドキュメント]]
([TIME[2016-04-15 09:51:37 +09:00]] 版)
<https://docs.google.com/document/d/1wtV5rmLhbf1OZkbg7crtCt6h1mMtig_ctTQt3BLLEIU/edit?pref=2&pli=1>

[35] [CITE@en[Use the Window's associated Document for allow-modals sandbox checks]]
([[domenic]]著, [TIME[2016-07-14 06:37:56 +09:00]])
<https://github.com/whatwg/html/commit/29ebd5b6e8c4ba4006115a784c5c6c87dc151489>

[36] [CITE@en[document handling: invoke user prompt handler implicitly when executi…]]
([[andreastt]]著, [TIME[2016-07-19 23:46:49 +09:00]])
<https://github.com/w3c/webdriver/commit/16dba3131d4b544b6ed4c6203af621294413ee4f>

[38] [CITE@en[Chromium policy on JavaScript dialogs  |  Web  |  Google Developers]]
( ([TIME[2017-03-31 00:28:36 +09:00]]))
<https://developers.google.com/web/updates/2017/03/dialogs-policy>

[FIG(quote)[
[FIGCAPTION[
[39] [CITE@en-US[Chrome incompatibilities - Mozilla | MDN]]
([TIME[2017-04-08 00:51:05 +09:00]])
<https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Chrome_incompatibilities>
]FIGCAPTION]

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

]FIG]

[40] [CITE@en[160144 - Replace POSTDATA dialog with better UI (post form resubmit warning)]]
([TIME[2017-06-27 13:24:38 +09:00]])
<https://bugzilla.mozilla.org/show_bug.cgi?id=160144>

[41] [CITE@en[Deprecate alert(), confirm(), prompt() · Issue #2894 · whatwg/html]]
([TIME[2017-08-06 21:33:48 +09:00]])
<https://github.com/whatwg/html/issues/2894>

[42] [CITE@ja[Project OldSpice - Google ドキュメント]]
([TIME[2017-08-06 21:35:09 +09:00]])
<https://docs.google.com/document/d/1wtV5rmLhbf1OZkbg7crtCt6h1mMtig_ctTQt3BLLEIU/edit>

[43] [CITE@en[Remove the pending dialog stack in favor of the top layer]]
([[domenic]]著, [TIME[2017-09-05 18:48:24 +09:00]])
<https://github.com/whatwg/html/commit/ea14be5f8cdbab1598b4000887bd6990c039aaff>

[44] [CITE@en[New in Chrome 63  |  Web  |  Google Developers]]
([TIME[2017-12-08 00:12:30 +09:00]])
<https://developers.google.com/web/updates/2017/12/nic63?utm_source=feed&utm_medium=feed&utm_campaign>

[45] [CITE@en[Treat CR, LF, CRLF the same for alert/confirm/prompt]]
([[domenic]]著, [TIME[2018-11-21 08:19:05 +09:00]])
<https://github.com/whatwg/html/commit/76638126838951c21aee4a1220cd0a4e57f3081d>

[48] [CITE@en[Specify line-breaking behavior of dialogs · Issue #4094 · whatwg/html]]
([TIME[2019-04-19 18:29:49 +09:00]])
<https://github.com/whatwg/html/issues/4094>

[49] [CITE@en[Treat CR, LF, CRLF the same for alert/confirm/prompt by domenic · Pull Request #4105 · whatwg/html]]
([TIME[2019-04-19 18:30:57 +09:00]])
<https://github.com/whatwg/html/pull/4105>

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

Historical Legal Sensitive Parent: [Help / License]

Edit

Page

Page name(s)