web-dev-qa-db-ja.com

モーダルとオーバーレイの動作-モーダルを閉じるタイミング

オーバーレイ上のモーダル/ポップアップを考えると、以下のように、どのインタラクションがモーダルを閉じる必要があるかについて、(必要に応じて)特定の受け入れ可能な方法があることがわかります。

  1. オーバーレイをクリック
  2. Escキーを押す
  3. モーダル/ポップアップ(リリースしないでください)をクリックし、モーダル/ポップアップの外にマウスをドラッグして、オーバーレイになるまで離します。
  4. モーダルに閉じるボタンまたはアイコンがあること

これとは別に、ユーザーがオーバーレイをクリックして(リリースではない)クリックし、オーバーレイからドラッグを開始してモーダルウィンドウ(3の反対側)に移動してからマウスを離すと、モーダルを閉じることをお勧めします。

ここで問題となっているモーダルには、基本的に、ユーザーが詳細を入力/編集して保存する必要がある長いフォームが含まれています。フォームにはすでにキャンセル、保存ボタンがあります。

1
whyAto8

モーダルに復元できない重要な情報が含まれている場合、閉じるボタンが明示的にクリックされたときにのみモーダルが閉じます。押す Esc または、他の場所をクリックしても閉じないでください閉じます。それ以外の場合、ほとんどのユーザーは最初からほとんどのモーダル(広告)を望んでいないため、モーダルがどのように閉じられるかは問題ではありません。

フォームの場合、作業が失われる可能性があるため、簡単に却下したくないです。進行中のフォームが保存されている場合でも、フォームが消えると、ユーザーにパニック攻撃が発生する可能性があります。


モーダルの内側から外側にドラッグすると、 Bootstrap Modal demo page のモーダルが閉じません。外側から内側にドラッグすると閉じますが、モーダルの外側をクリックした場合の副作用のようです。 (私はFirefoxを使用しています。)

1
習約塔

ユーザーが情報を入力しようとしているフォームを持つモーダルは、閉じるボタンをクリックすることによってのみ閉じる必要があります。他の迅速な却下方法をライトボックスで使用すると、既に利用可能な読み取り専用コンテンツの多くを表示するのに役立ちます。たとえば、大きな画像を表示します。ただし、必要に応じて解雇の可能性を伝える明示的なCTAとして右上に閉じるボタンを配置することをお勧めします。

2
Ren