Modal

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

Show Modal

Overview

Version 1.0.1

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.

Modal.js defaults to using cutting-edge css3 flexbox for the layout. This can be turned off if you wish to support older browsers. Flexbox ensures the text is nice and sharp.


Using 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.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.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: ok, cancel, close

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


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

License

MIT © Kevin Jantzer


Built by Kevin Jantzer, Blackstone Audio Inc.