Custom Dialogs — jQuery UI replacement

Let's open a dialog using:

Goals

Provide a drop-in replacement for jQuery UI

These dialogs should be able to use the jQuery UI dialog syntax verbatim without requiring the jQuery UI library.

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.

Bonus

jQuery's backward compatibility shims enable this demo to run on Internet Explorer 11.

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.