Overview

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.

Install

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.

Confirm

Modal.confirm(function(){
    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.confirmDelete(function(){
    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

Modal.spinner()

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

Spinner

Modal.spinner();

// you can hide the spinner when ready
Modal.spinner(false);

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',
    btns:['cancel']
})

Modal.progress()

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%

progressModal.close();

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.

Options

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"

License

MIT © Kevin Jantzer