2.6 KiB
Executable File
vex
Dialogs for the 21st century.
Demo — Documentation
Take control of your dialogs
Vex is a modern dialog library which is highly configurable, easily stylable, and gets out of the way. You'll love vex because it's tiny (6kb minified, 2kb minified+gz), has a clear and simple API, works on mobile devices, and can be customized to match your style in seconds.
Features
- Drop-in replacement for
alert,confirm, andprompt - Easilly configurable animations which are smooth as butter
- Tiny footprint (
6kbminified) and only depends onjQuery - Looks and behaves great on mobile devices
- Open multiple dialogs at once and close them individually or all at once
- Built in CSS spinner for asynchronous dialogs
Documentation
How To Use Vex
Basics of Opening and Passing Content
To open a dialog, call vex.open.
vex.open
content: '<div>Content</div>'
afterOpen: ($vexContent) ->
# console.log $vexContent.data().vex
$vexContent.append $el
afterClose: ->
console.log 'vexClose'
Instead of using callbacks, you can choose to chain off the open call and bind to vexOpen and vexClose events. For example:
vex
.open()
.append($el)
.bind('vexOpen', (options) ->
options.$vexContent.append $el
)
.bind('vexClose', ->
console.log 'vexClose'
)
Read more about Vex in the API docs.
Vex Dialog
When including vex.dialog, you get dropin replacements for alert, confirm, and prompt.
<script src="vex.dialog.js"></script>
API
Vex Dialog exposes 4 main apis:
vex.dialog.alert(stringOrOptions)vex.dialog.confirm(options)vex.dialog.prompt(options)vex.dialog.open(options)
(Internally, alert, confirm, and prompt call open with a different compositions of options.)
Read more about Vex dialog in the API docs.
Options
When calling vex.open() you can pass a number of options to handle styling and certain behaviors.
Here are the defaults:
defaultOptions:
content: ''
showCloseButton: true
overlayClosesOnClick: true
appendLocation: 'body'
className: ''
css: {}
overlayClassName: ''
overlayCSS: {}
closeClassName: ''
closeCSS: {}