web-dev-qa-db-ja.com

モーダルダイアログの半透明の背景は何と呼ばれますか?

最近では、モーダルダイアログが操作できないことを明確にするために、背景のコンテンツの明るさも下げるのが一般的です。これは特にWebでよく見られます。

モーダルの背後にある暗くなることの名前は何ですか?

Example of a modal dialog

標準的な名前を知らなかったので、少しばかげた名前sneezeguardに頼りました。

10
aaaidan

「モーダルbackdrop」と呼ばれます

Bootstrapでのドキュメント Modal/Options

9
Garik

これはライトボックス効果と呼ばれます。また、モーダルがフォーカスされ、その背後のウィンドウが無効になっているため、「フォーカスが外れている」とも呼ばれます。

https://uxplanet.org/best-practices-for-modals-overlays-dialog-windows-c00c66cddd8c

6
Refe

モーダルの背後の背景がぼやけて暗くなり、3D効果によって視覚的なコントラストが増し、背景が視覚的に後退します。

背景がぼやけている暗い、透明なレイヤーに適した言葉はスクリムです。スクリムは、写真や映画の撮影で照明を物理的に覆うために使用されるもので、照明効果を得るためのものです。

マテリアルデザインガイドラインで使用されているWordスクリムは次のとおりです。

ユーザーは、背景カバーまたはスクリムをタップまたはクリックして、フォアグラウンドで開いているものをすべて閉じることができる必要があります。背景をタップして開いたように。

3
moot

GoogleマテリアルデザインガイドラインではこれをScrimと呼んでいます: https://material.io/design/environment/surfaces.html#attributes

スクリム

スクリムは、表面のコンテンツを目立たなくする目的でマテリアルサーフェスに適用できる一時的な処理です。それらは、スクリムを受け取る表面から離れて、画面の他の部分にユーザーの注意を向けるのに役立ちます。

スクリムは、次のようなさまざまな方法で適用できます。

  • 表面とその内容を暗くしたり明るくしたりする
  • 表面とその内容の不透明度を減らす

一度に画面上の複数のサーフェスでスクリムを表示できます。スクリムは、フォアグラウンドでもバックグラウンドでも、あらゆる高さに表示できます。

2
Aline

ここ数年、私が常にモーダル/ダイアログ/ポップアップの透明な背景のフレームワークで見つけた用語はoverlayです。

参照: モーダルのスタイルに関する考慮事項

overlayの扱いモーダルには、全画面を覆うオーバーレイが伴うことがよくあります。これは、いくつかの理由に役立ちます。

  • 画面の残りの部分を暗く(またはミュート)して、モーダルの「離れる前にこれに対処する必要がある」という目的を強制します。
  • これは、モーダル外のアイテムのクリック/相互作用を防止するために使用できます。
  • 巨大な閉じるボタンとして使用できます。または、「キャンセル」または最も無害なアクションです。

マテリアルデザインでは、backdropという用語が使用されます。

enter image description here

2
Madalina Taina