Modals

"A modal window is a secondary window that opens inside the main window. Users have to interact with it before they can return to the main window. Use modal windows when you have to take the user’s focus off the main window to an important window that needs their attention. -- UX Movement

Demo Modal

Click here to launch demo modal

Modal Buttons

Blue button: User for Submit, Save, Ok

Red button: Delete only

Grey button: Everything else

Examples

For informative modals (ie, those that don't require any further user interaction) use an "Ok" button in the footer to close the modal, in addition to the close icon in the header. Example.

For confirmation modals (ie, confirming a user action, such as delete) where there is no additional information, center the buttons in the modal body. Example.