Bootstrap tutorial

Modal dialogs

css class description
modal Specifies the container for modal dialog.
modal-dialog Specifies modal dialog.
modal-content Specifies content of modal dialog. It includes header, body and footer.
modal-header Specifies the container for the title section of a modal dialog.
modal-title Specifies title of dialog.
modal-body Specifies the container for the body section of dialog.
modal-footer Specifies the container for the footer section of dialog.
Code example
Live demo

methods

An element with class modal has a method modal() that implements the entire API associated with the dialog.

parameter description
modal(options) Activates your content as a modal. Options object can have following boolean fields:
  • backdrop - disallows to dismiss dialog when user clicks outside of dialog. Alternatively, you can use the data-backdrop="static" attribute.
  • keyboard - allows to dismiss dialog when escape key is pressed.
  • focus - puts the focus on the dialog when initialized.
  • show - shows the modal when initialized.
$('#myModal').modal({keyboard: false});
modal('toggle') Toggles the modal, i.e. shows dialog when hidden, and vice versa.
modal('show') Shows dialog.
modal('hide') Shows dialog.
modal('handleUpdate') Readjusts the dialog's position.
modal('dispose') Destroys a dialog.

events

All events are applied to element with class modal.

event name description
show.bs.modal Fires immediately when the show() method is called.
shown.bs.modal Fires when the dialog has been made visible to the user.
hide.bs.modal Fires immediately when the hide() method is called.
hidden.bs.modal Fires when the dialog is hidden from the user.
hidePrevented.bs.modal Fires when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option or data-keyboard set to false. 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
});

optional sizes

By default maximum width of dialog is 500px. But you can specify other size by adding class:

  • modal-sm - maximum width is 300px
  • modal-lg - maximum width is 800px
  • modal-xl - maximum width is 1140px

You should add class to the element with class dialog-modal.

draggable dialogs

By default, the user cannot move the dialog. But with jQuery-UI library you need one line.

$(".modal-dialog").draggable({
        handle: ".modal-header"
    });

jQuery-UI you can add like this

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" 
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>