3
7
  1. Dashboard
  2. UI Elements
  3. Modals
Modals
  • Basic Modal

    Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

    Scrolling Long Content

    When modals become too long for the user’s viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.

    Vertically Centered

    Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

    Tooltips and Popovers

    Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

    Colored Modals

    Add .modal-* to .modal for different background color.

    Modal Sizes

    Add .modal-lg or modal-sm to .modal-dialog for different size.

  • Varying Modal Content

    Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and HTML data-* attributes to vary the contents of the modal depending on which button was clicked.

    $('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-backdrop="".

Name Type Default Description
backdrop boolean or string true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
keyboard boolean true Closes the modal when escape key is pressed.
focus boolean true Puts the focus on the modal when initialized.
show boolean true Shows the modal when initialized.
Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Type Description
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.
hide.bs.modal This event is fired immediately when the hide instance method has been called.
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

siQtheme License Github siQtheme NPM siQtheme

Copyright © 2019-2020 siQtheme by 3M Square. All rights reserved.