jQuery Bootstrap 3 Dialog Examples

<div class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body…</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

What they want is more like this:

BootstrapDialog.alert('I want banana!');

Like it? See Available Options or try more Examples below.

Examples

Simplest

Provide only the message to show, and keep all other things default.

Title

Buttons

Message types

Larger dialog

By default, the dialog size is 'size-normal' or BootstrapDialog.SIZE_NORMAL, but you can have a larger dialog by setting option 'size' to 'size-large' or BootstrapDialog.SIZE_LARGE.

Rich message

BootstrapDialog supports displaying rich content, so you can even use a video clip as your message in the dialog.

Dialog unclosable

If option 'closable' is set to false, the default closing behaviors will be disabled, but you can still close the dialog by using dialog.close().

Auto spinning icon

Lazy guys must love this.

Manipulating your dialog

Data binding

Creating dialog instances

BootstrapDialog.show(...) is just a shortcut method, if you need dialog instances, use 'new'.

Dialog events

Two dialog level events are supported currently: onshow, onhide.
Please note that if you're going to use setters to configure event handlers, use dialog.onShow(function) and dialog.onHide(function).

More shortcut methods

Alert

Alert with callback

Confirm

Confirm with callback

Source code of the shortcut methods above

I mean you can write your owned handy stuff :)

Available options

Please note that all options described below are optional, but you will have a weird dialog if you don't even give it a message to display.
Most options can be set via init options or property setters.

Option Possible values Description
type BootstrapDialog.TYPE_DEFAULT or 'type-default'
BootstrapDialog.TYPE_INFO or 'type-info'
BootstrapDialog.TYPE_PRIMARY or 'type-primary' (default)
BootstrapDialog.TYPE_SUCCESS or 'type-success'
BootstrapDialog.TYPE_WARNING or 'type-warning'
BootstrapDialog.TYPE_DANGER or 'type-danger' 		Give your dialog a specific look, color scheme can be seen on Bootstrap's Button.
size BootstrapDialog.SIZE_NORMAL or 'size-normal' (default)
BootstrapDialog.SIZE_LARGE or 'size-large'
-
title String or Object(html) -
message String or Object(html) -
buttons array Examples:
BootstrapDialog.show({ title: 'Say-hello dialog', message: 'Hello world!', buttons: [{ id: 'btn-ok', icon: 'glyphicon glyphicon-check', label: 'OK', cssClass: 'btn-primary', autospin: false, action: function(dialogRef){ dialogRef.close(); } }] });
id: optional, if id is set, you can use dialogInstance.getButton(id) to get the button later.
icon: optional, if set, the specified icon will be added to the button.
cssClass: optinal, additional css class to be added to the button.
autospin: optinal, if it's true, after clicked the button a spinning icon appears.
action: optional, if provided, the callback will be invoked after the button is clicked, and the dialog instance will be passed to the callback function.
closable true | false When set to true, you can close the dialog by:
  • Clicking the close icon in dialog header.
  • Clicking outside the dialog.
  • ESC key.
spinicon Icon class name, for example 'glyphicon glyphicon-check'.
Default value is 'glyphicon glyphicon-asterisk'. 		When set to true, after clicked on a button, a spinning icon appears in which button you have clicked automatically.
data Key-value object. For example {'id' : '100'} Data to be bound to the dialog.
onshow function If provided, it will be invoked when the dialog is popping up.
onhide function If provided, it will be invoked when the dialog is popping down.
autodestroy true (default) | false When it's true, all modal stuff will be removed from the DOM tree after the dialog is popped down, set it to false if you need your dialog (same instance) pups up and down again and again.

Available methods

Method Description
open() Open the dialog. Usage: dialogInstance.open()
close() Close the dialog. Usage: dialogInstance.close()
getModal() Return the raw modal, equivalent to $('<div class='modal fade'...></div>')
getModalDialog() Return the raw modal dialog.
getModalContent() Return the raw modal content.
getModalHeader() Return the raw modal header.
getModalBody() Return the raw modal body.
getModalFooter() Return the raw modal footer.
getData(key) Get data entry according to the given key, returns null if no data entry found.
setData(key, value) Bind data entry to dialog instance, value can be any types that javascript supports.
enableButtons(boolean) Disable all buttons in dialog footer when it's false, enable all when it's true.
setClosable(boolean) When set to true (default), dialog can be closed by clicking close icon in dialog header, or by clicking outside the dialog, or, ESC key is pressed.
realize() Calling dialog.open() will automatically get this method called first, but if you want to do something on your dialog before it's shown, you can manually call dialog.realize() before calling dialog.open().