Modals

  1. Home
  2. User Interface
  3. Modals

A modal dialog appears on top of the main content and moves the system into a special mode requiring user interaction. This dialog disables the main content until the user explicitly interacts with the modal dialog.

  • Use modal dialogs for important warnings, as a way to prevent or correct critical errors.
  • Use modal dialogs to request the user to enter information critical to continuing the current process.
  • Modal dialogs can be used to fragment a complex workflow into simpler steps.
  • Use modal dialogs to ask for information that, when provided, could significantly lessen users’ work or effort.
  • Do not use modal dialogs for nonessential information that is not related to the current user flow.
  • Avoid modal dialogs for complex decision making that requires additional sources of information unavailable in the modal.

Use Bootstrap's JavaScript modal plugin to add dialogs, user notifications, or custom content. Documentation on Bootstrap modals can be found here: Bootstrap Modals

Default modals

Toggle modals by clicking the buttons below... the modal will slide down and fade in from the top of the view.

Launch default modal Large modal Small modal

<!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie suscipit ultricies. Nunc non pulvinar tellus. Nunc varius non ante lobortis venenatis. Aenean enim urna, fermentum eget lectus quis, egestas rutrum dolor. Praesent rutrum eget augue eget maximus. Vivamus vel orci vulputate quam tristique ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tincidunt bibendum suscipit. </p><p>Nunc molestie felis vitae sem malesuada pulvinar. In condimentum, eros id pellentesque eleifend, sem nibh eleifend neque, ac ultrices nisl nisl vel felis. Phasellus et pellentesque enim, quis tincidunt dui. Suspendisse nisi libero, mollis efficitur commodo in, tempor ut odio. Donec consequat nunc lorem, sit amet pellentesque erat volutpat et.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Large modal --> <a role="button" href="#" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</a> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Large title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie suscipit ultricies. Nunc non pulvinar tellus. Nunc varius non ante lobortis venenatis. Aenean enim urna, fermentum eget lectus quis, egestas rutrum dolor. Praesent rutrum eget augue eget maximus. Vivamus vel orci vulputate quam tristique ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tincidunt bibendum suscipit. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Small modal --> <a role="button" href="#" class="btn btn-dprimary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</a> <div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Small title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie suscipit ultricies. Nunc non pulvinar tellus. Nunc varius non ante lobortis venenatis. Aenean enim urna, fermentum eget lectus quis, egestas rutrum dolor. Praesent rutrum eget augue eget maximus. Vivamus vel orci vulputate quam tristique ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tincidunt bibendum suscipit. </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button> </div> </div> </div> </div>

Custom modal

Custom style for modal dialog.

Open custom modal

<!-- Modal --> <div class="modal fade custom-modal" id="customModal" tabindex="-1" role="dialog" aria-labelledby="customModal" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel2">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent molestie suscipit ultricies. Nunc non pulvinar tellus. Nunc varius non ante lobortis venenatis. Aenean enim urna, fermentum eget lectus quis, egestas rutrum dolor. Praesent rutrum eget augue eget maximus. Vivamus vel orci vulputate quam tristique ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam tincidunt bibendum suscipit. </p><p>Nunc molestie felis vitae sem malesuada pulvinar. In condimentum, eros id pellentesque eleifend, sem nibh eleifend neque, ac ultrices nisl nisl vel felis. Phasellus et pellentesque enim, quis tincidunt dui. Suspendisse nisi libero, mollis efficitur commodo in, tempor ut odio. Donec consequat nunc lorem, sit amet pellentesque erat volutpat et.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>