Custom Dialogs — Native

Let's open a dialog:

Goals

Capturing and retaining focus

Modal dialogs should capture focus and retain it until closed. This requires:

  1. Switching focus to the newly opened dialog
  2. Preventing clicks and tab presses from focusing elements outside the dialog

Closing

Any input device should be able to close the dialog. This example uses focusable (tabbable) buttons as well as the ESC key. Focus should then return to the previously active element.

Accordingly these dialogs should work well with pointer devices (mouse, touch screen, etc.) or keyboard tabbing.

Limitations

This demo uses HTML that is not backwards compatible with outdated browsers.

This is a custom alert dialog

Do you like ice-cream?

Enter all your information please:

Thank you for submitting all your information.

You won't regret it.