Create clean modal windows with sleek transitions and a simple API.

Show Modal


Version 1.1.0

Native alert views are ugly and very limiting; this plugin was designed to replace native alert() and provide additional features commonly needed in apps.

It has been developed with a simple and extensible API to make using modals easy.


npm install backbone-modal

Using Modal

window.Modal = require('backbone-modal')
var myModal = new Modal({
    title: '',
    msg: '',
    btns: ['ok'],
    theme: 'ios7',
    w: null,
    effect: 1,

Modal Presets

Various presets have been defined for common application actions such as "alert", "confirm", "confirmDelete", "prompt" and showing a spinner.

Most of the parameters, such as title and msg can be optional and will fallback to defaults. Therefore, params are taken in order from the right.

For example, if params are title, msg, callback but only one parameter is given, it will be assumed as the callback. If two params, msg and callback are assumed, and so on.

Modal.alert(msg) or Modal.alert(title, msg)

Alert Alert with Long Message

Modal.success(title, msg) (also warn and error)

Success Warn Error

Modal.confirm(title, msg, callback)

Title and msg are optional; if you leave them out, defaults will be used.


    Modal.alert('You choose to confirm the action.')

Modal.confirmDelete(title, msg, callback)

Like confirm, title and msg are optional; if you leave them out, defaults will be used.

Confirm Delete

    Modal.alert('You choose to delete.')

Modal.prompt(title, msg, opts, callback)

This preset allows for asking the user in input some data. The prompt can be set to validate based on a regexp pattern.

Prompt Prompt Textarea Prompt for Number

Modal.prompt('Type Anything', '', {}, function(val){
    Modal.alert('You typed:', val)

Prompt Options

    okBtn: 'Ok',
    password: false,
    placeholder: 'Enter value...',
    val: '', // prefill the input
    pattern: null, // a regex or preset (string, integer, number, year)
    h: null // add height for textarea

Modal.img(title, imgSrc)

Display an image from url.

Show Image Show Image w/ Title


Shows a spinner with no way to close it. Ideal when you want to show progress, but not let the user click around.



// you can hide the spinner when ready

You can show the spinner in a regular Modal too, by using title:'spinner'.

Spinner with Message

new Modal({
    title: 'spinner',
    msg: 'Waiting for response',


Shows modal with no buttons. Save the created modal to a variable and use .progress() method to show progress. Useful for actions such as file upload.

Show Progress

progressModal = Modal.progress('Uploading', '');

// later...
progressModal.progress(10) // 10%
progressModal.progress(23) // 23%
progressModal.progress(84) // 84%


Tip: you can use .setTitle() and .setMsg() to change the alert title and message while uploading. This could be used when uploading multiple files to show user which file is being uploaded.


btns: ['ok']

Modals can have multiple buttons, each with different callback functions.

btns: [{
    label: 'Ok',
    className: 'md-close', // add this class to hide modal on click
    onClick: function(){},
    eventKey: null, // esc, enter, delete, or null

There is also a few button presets: close, cancel, ok, done, dismiss

If eventKey is set, the onClick callback will be triggered when the user hits the specified key.

Modal leverages basic buttons so you can use icons in buttons too.

Modal with Icons

headerImg: 'url-to-img'

Image Header Image Header w/ Icon

effect: 1

Modal comes setup with multiple different animation styles. The deafult is 1, or "Fade in and Scale"

1: Fade in & Scale 2: Slide in (right) 3: Slide in (bottom) 4: Newspaper 5: Fall 6: Side Fall 7: Sticky Up 8: 3D Flip (horizontal) 9: 3D Flip (vertical) 10: 3D Sign 11: Super Scaled 12: Just Me 13: 3D Slit 14: 3D Rotate Bottom 15: 3D Rotate In Left


MIT © Kevin Jantzer

Built by Kevin Jantzer, Blackstone Publishing