Modals/Dialogues

Modals, or Dialogues, are used to request information from the user or to give them feedback. They are usually initiated by the system in case of error or in response to user actions (warning dialogues, choice dialogues). Read more about dialogues in the UX Guidelines.

Use when

  • The user needs to be informed about something important
  • The user needs to enter information before the application can continue

Static example

A rendered modal with header, body, and set of actions in the footer.

A dialog box has a fix width of 600px, but it shrink when it dosen't have space for it.

Options

Modals with alert icons

By adding .modal-info, .modal-help, .modal-success, .modal-warning or .modal-error class to the modal wrapper .modal, it will thansfor the modal into a alert dialog.

Modal size

Modals have two optional sizes (720px and 480 px width), .modal-lg and .modal-sm, available via modifier classes to be placed on .modal-dialog.

By clicking on buttons the modal will show, the functionality is just an example on how it should work.

				
// Basic modal / dialog box
<div class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" aria-label="Close"></button>
                <h4 class="modal-title">Title of the dialogue box</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                ...
            </div>
        </div>
    </div>
</div>


// Modal / dialog box with alert icons
<div class="modal modal-help">
    <div class="modal-dialog">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>


// Modal opption size
<div class="modal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>