The modal dialog is a disruptive dialog box that appears in front of a page’s content. It is used to convey important information within context of the page, since it blocks the page’s content while keeping it in view (on medium and large viewports).
Modal dialogs should be used intentionally and sparingly. They are disruptive to a user’s flow and thus should be used to:
- Confirm a user’s action, especially if the action is destructive (e.g. dropping a course) or irreversible.
- Provide additional information—especially rich information containing lists or images—that cannot fit into a tooltip or text on the page.
- Let users fill up a form within context, in cases where this helps to either speed up the process or return users to their original flows after the completion of the form. For instance, the “Add a member to a course schedule” modal allows an admin to quickly add someone to a course schedule without having to go to a separate page.
Note About Accessibility
Always use button to open dialogs. Even when in cases where the button is supposed to look like a link, button with class "link" should be used instead of an anchor tag. Using a button is better for accessibility.
<button class="button button--primary" data-reveal-id="designSystemShowModalDialog"> Open Confirmation Modal Dialog </button> @component('components.dialog.dialog', ['id' => 'designSystemShowModalDialog']) @slot('title') Delete reply? @endslot <p> Are you sure you want to delete your reply? This action cannot be undone. </p> @slot('footer') <button class="button button--warning js-confirm-delete-message">Yes, delete comment</button> <button class="button button--ghost js-closeDialog">Cancel</button> @endslot @endcomponent
Some actions require a simple confirmation dialog and rather than creating a custom dialog and adding JS for this dialog it is handy to use our standard confirmation dialog that can be attached to any button which requires confirmation action.
There are however limitations to the confirmation modal. As it can only take url and make a fetch request to that url. Upon completion of that action it can only route to any page. We can not customize the actions like removing element using JS or doing any action before making the API call.Delete article
<a href="/api/comments/42" class="button button--warning js-confirmationRequired" data-confirm-method="DELETE" data-dialog-class="tiny" data-title="Delete article?" data-message="Are you sure you want to delete this article? You will not be able to undo this action." data-confirm-button="Yes, delete this article" data-confirm-button-class="button button--warning" data-confirm-redirect-url-after-success="#" data-cancel-button="No, back to safety" > Delete article </a>