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 (default) has a fix width of 600px, but it shrink when it dosen't have space for it, more sizes are available below.

Also, you can arrange the buttons from a modal using helper classes.

                    


<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>

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 transform the modal into a alert dialog.

By default the icon will be placed on the left, but you have the option to place it on top and align everything on center (.modal-center). Follow the examples below.

Default - icon placed on left 

                    


<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>




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




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




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




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

Centered - icon placed on center, also the text

Default - icon placed on left

Centered - icon placed on center, also the text .modal-center

                    


<div id="modal-with-alert-icons" class="modal modal-center 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>

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.

For this component you need JavaScript! We recommend you to create your own script to show and hide the modal. If you need help just contact us.

                    

<!-- Full width -->



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



<!-- Extra large size -->



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



<!-- Large 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>



<!-- Default size -->



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



<!-- Small size -->



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