Make use of Bootstrap's modal more monkey-friendly.

Monkeys love the Modal Dialog from Bootstrap, but they're getting angry because they have to write this stuff: 

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

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

Dialog Title

Manipulating Dialog Title

Manipulating Dialog Message

Loading remote page (1)

There are some workarounds for loading remote page into Modal as message, one of those workarounds is as below.
Check out the remote.html.

Loading remote page (2)

Another solution of loading remote page into Modal.
This one is more flexible and customizable, but it's also a bit more complicated to use.

Loading remote page (3)

remote option can be a function.

Loading remote page (4)

remote option can be a object with ajax config.

Loading remote page (5)

remote with ajax callback.

Loading remote page (6)

remote with ajax callback and handle content yourself.

Loading remote page (7)

remote with ajax callback and handle content yourself.

Buttons

Manipulating Buttons

Buttons that created by Modal have some extra functions available:
$button.toggleEnable(true|false);
$button.enable(); // Equals to $button.toggleEnable(true);
$button.disable(); // Equals to $button.toggleEnable(false);
$button.toggleSpin(true|false);
$button.spin(); // Equals to $button.toggleSpin(true);
$button.stopSpin(); // Equals to $button.toggleSpin(false);

Button Hotkey

Try to press the keys that have been associated with buttons below.
The last button is disabled so nothing is going to happen when pressing its hotkey.
Please note that if there are some components that require keyboard operations in your dialog, conflicts may occur, you can try next example.

Keys Conflicts

Try to avoid doing similar in your code.

Opening multiple dialogs

A good looking stacked dialogs. Please also note the second and the third dialog are draggable.

Creating dialog instances

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

In fact Modal.show(...) will also return the created dialog instance.

Open / Close multiple dialogs

This example demonstrates opening and closing a batch of dialogs at one time.
Dialog that created by Modal will be in a container Modal.dialogs before it's closed and destroyed, iterate Modal.dialogs to find all dialogs that havn't been destroyed.

Button with identifier

Message types

Changing dialog type

Larger dialog

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

More dialog sizes by defaults

Please note that specifying Modal.SIZE_WIDE is equal to using css class 'modal-lg' on Bootstrap Modal.

More dialog sizes by values

You can also set size(width) by values link number(String) or string ends with 'em'、'rem'、'px'、'%'.

Define dialog size with an object

Set dialog size with an object. width、height、minWidth、maxWidth、minHeight、maxHeight can be number(String) or string ends with 'em'、'rem'、'px'、'%'.

Rich message

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

Dialog closable / 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().

More controls on closing a dialog.

By default, when option 'closable' is set to true, dialog can be closed by these ways: clicking outside the dialog, pressing ESC key, clicking the close icon on the right of dialog header.
If you want your dialog closes only when the close icon in dialog header was clicked, try setting both of the options 'closeByBackdrop' and 'closeByKeyboard' to false.

Disabling Animation

Setting option 'animate' to false to disable animation for the opening dialog.
If you want to disable animation globally, try to do this:
Modal.configDefaultOptions({ animate: false });

Auto spinning icon

Lazy guys must love this.

Dialog Draggable

When option 'draggable' is set to true, your dialog can be moved by dragging on its header.
If you would like to change the cursor shape of hovering on dialog header, you can try the following css lines:

.bootstrap-dialog .modal-header.bootstrap-dialog-draggable { cursor: move; }

Manipulating your dialog

Adding additional css classes to your dialog

This is useful for applying effects to specific dialogs.
For example if you would like to give your 'login-dialog' a smaller size, you can do this way:

Adding a description to your dialog (for accessibility)

This adds an 'aria-describedby' attribute to your dialog, which provides a description of the dialog for screen readers.

Data binding

Dialog events

Please note that if you're going to use setters to configure event handlers, use dialog.onShow(function) and dialog.onHide(function).

Stop closing your dialog.

Option 'onhide' gives you an opportunity to stop closing the dialog according to some conditions, making your 'onhide' callback returns false to stop closing the dialog.
In the following example, the dialog closes only when your most favorite fruit is 'banana' (Case insensitive).

More shortcut methods

Alert

Alert with callback

Customizing dialog type, title, and more.

All options shown below are optional.

Confirm

Confirm with callback

Just like what we have done in alert, we can control confirm dialog more.

Loading

Loading with callback

Loading delay option（defaults is 150ms）

Position

Position boundary

Position mixture

Processing

Processing with warning callback

Processing with error callback

Processing with success callback

Processing with handle callback

Info

Info with message

Info with position

Info with callback 1

Info with callback 2

Info with callback 3

Warning

Warning with message

Warning with position

Warning with callback 1

Warning with callback 2

Warning with callback 3

Error

Error with message

Error with position

Error with callback 1

Error with callback 2

Error with callback 3

Success

Success with message

Success with position

Success with callback 1

Success with callback 2

Success with callback 3

I18N

To provide local messages for you needed, reset those messages below before using Modal.

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 Modal.TYPE_DEFAULT or 'type-default'
Modal.TYPE_INFO or 'type-info'
Modal.TYPE_PRIMARY or 'type-primary' (default)
Modal.TYPE_SUCCESS or 'type-success'
Modal.TYPE_WARNING or 'type-warning'
Modal.TYPE_ERROR or 'type-error' 		Give your dialog a specific look, color scheme can be seen on Bootstrap's Button.
size Modal.SIZE_NORMAL or 'size-normal' (default)
Modal.SIZE_WIDE or 'size-wide'
Modal.SIZE_LARGE or 'size-large'
-
cssClass - Additional css classes that will be added to your dialog.
title String or Object(html) -
message String or Object(html) -
buttons array Examples:
Modal.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: optional, 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'. 		Specify what icon to be used as the spinning icon when button's 'autospin' is set to true.
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.
onshown function If provided, it will be invoked when the dialog is popped up.
onhide function If provided, it will be invoked when the dialog is popping down.
onhidden function If provided, it will be invoked when the dialog is popped 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.
description String If provided, 'aria-describedby' attribute will be added to the dialog with the description string as its value. This can improve accessibility, as the description can be read by screen readers.

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().