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.

Modals have 5 optional sizes:

  • full width (.modal-full )
  • 60% of your viewport (.modal-xl )
  • 720px (.modal-lg )
  • 600px (default size - no additional class needed)
  • 480px (.modal-sm )

Classes need 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 id="modal-id" class="modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-toggle="modal" data-target="modal-id" aria-label="Close"></button>
                <h4 id="modal-title" class="modal-title">Title of the dialogue box</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                ...
                <button type="button" class="btn btn-default" data-toggle="modal" data-target="modal-id">Cancel</button>
            </div>
        </div>
    </div>
</div>


// Modal / dialog box with alert icons
<div id="modal-with-alert-icons" class="modal modal-help" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>


// Modal opption size
<div id="modal-lg" class="modal" tabindex="-1" role="dialog" aria-labelledby="modal-title" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            ...
        </div>
    </div>
</div>