web-dev-qa-db-ja.com

モーダルの上にモーダル

bootstrap modalsを使用すると、内部にコンテンツが含まれる情報モーダルが存在するという問題が発生し続けますが、最初に「決定を確認する」モーダル/ポップアップが必要です。モーダル。

例えば。ユーザーのリストを含むページがあります。ユーザーをクリックして、その中にユーザー情報を含むモーダルを開くことができます。その後、「ユーザーの削除の確認」モーダルを必要とするモーダルの「ユーザーの削除」ボタンが存在する可能性があります。

別のモーダルの上にモーダルを置くのは良い考えですか、それともモーダルを間違って使用していますか?代わりに実際のページを使用する必要がありますか?

32
Corey Rothwell

モーダルではなくモーダルと言うときは、モーダルを介した警告ボックスの確認についてもっと言及していると思います。私のコメントと同様に、例としてユーザープロフィールを表示するためにTwitterモーダルを使用しています。あなたの仕事から他の情報がなければ、これは私が考えることができる最も関連性の高いケースだからです。

あなたの質問に答えるために、モーダルは合理的なアプリケーションのようであり、ユーザーを新しいページに導くよりも利点があります-最も重要なユーザーのコンテキストを維持する。モーダルは、ユーザーの注意を集中させる自己完結型タスクの領域を作成するのに最適です。したがって、これらがあなたの目標である場合、新しいページは意味がありません。したがって、確認/警告に代替モーダルを使用することは、実行可能なルートです。

たとえばTwitterでは、フィード内のユーザーがsparkに興味を持っている可能性があり、現在の場所や現在行っていることのコンテキストを失うことなく、もう少し関連性の高い情報を知りたいと考えています。また、ユーザーが完全にコミットする必要はありませんで、完全に新しいページになります。

enter image description hereenter image description here

別の提案は、警告/確認の代わりに元に戻すパターンを使用することです。メールの削除後に表示されるGmailの元に戻すプロンプトの例。これにより、意図的に行動するユーザーのステップが節約され、他のユーザーが読書や事故を起こすことなく、習慣的なクリックから解放されます。これは元のモーダル内で行われます。

enter image description here

11
glilley

別のモーダルウィンドウの上のモーダルウィンドウの概念に問題はありません。エレガントな方法でそれを行うだけでよいので、ユーザーはアクションチェーンロジックを失うことがなく、邪魔になりません。

いくつかのアドバイス:

  • モーダルレベルの量をあまり大きくしすぎないでください(max:2に固執するようにしてください)
  • 本当に必要な場合のみモーダルプロパティを使用してください:アクションが完了する前に他のアクションが許可されていない場合。何かを確認するとき、ほとんどの場合、ユーザーisは他のアクションを実行できます。あなたの例では、ユーザーのリストがあり、それぞれに独自の削除ボタンがあります。ユーザーが[削除]をクリックしたときに、確認を求められる必要はありません。彼は「ねえ、それは間違った記録です、私は実際に他の記録を削除したいのです」と決めるかもしれません。そのため、最初に確認ダイアログを閉じる必要がなく、他の[削除]ボタンをクリックできます。

提供されている例について:2番目のダイアログ(ユーザーの削除の確認)は、実際にモーダルである必要はありません。確認/キャンセルボタン付きの小さなポップアップで十分です。他のすべての機能へのアクセスをブロックする必要はありません。このようなもの:

enter image description here

17
Alph.Dev

また、ドロップダウンメニューを使用して、最初の連絡先情報と[連絡先を削除]オプションを表示することをお勧めします。次に、ユーザーがそのオプションを選択すると、モーダルを表示してそのアクションを確認します。

同様の状況に遭遇したときはいつでも、モーダルの上にモーダルを使用するのではなく、ドロップダウンまたはその他のタイプのメニューを使用して情報を表示しようとします。

0
UX Research