Custom Dialogs — Vanilla Flavoured!

Let's open a dialog:

Goals

Capturing and retaining focus

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

Switching focus to the newly opened dialog
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 CSS 3 and ECMA Script features which are not backwards compatible with Internet Explorer.

Internet Explorer 11 continues to receive security updates but it does not receive modern feature updates. Consequently sites which must support Internet Explorer cannot advance.

Microsoft is encouraging Windows users to switch to Edge as their default web browser.

This is a custom alert dialog

Do you like ice-cream?

Enter all your information please:

Middle Name
Birth Date
Mother's Maiden Name
Social Security Number
Credit Card Number
Most Embarrassing Story
Most Incriminating Story

Thank you for submitting all your information.

You won't regret it.