Oppia UX guidelines & rationales - U8NWXD/oppia-wiki GitHub Wiki

Guidelines for Modals

Throughout Oppia we follow three patterns for modal closing:

  1. Modal with form(s) inside it.

    • It should only get closed if the user clicks the dedicated close button or by pressing the ESC key.
    • Example: image

  2. Modals with warnings or suggestions.

    • It should get closed through the dedicated close button or just by clicking outside the modal i.e, in the background or by pressing ESC key.

    • Example:

      image

  3. Modals which don't have a close button.

    • It should not get closed by users through any process.

    • Example:

      image