vex

Beautiful, functional, dialogs in Javascript

2.2.1

Vex

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), 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, and prompt
  • Easily configurable animations which are smooth as butter
  • Tiny footprint (6kb minified) and only depends on jQuery
  • 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
  • AMD support

Requirements

  • jQuery

Browser Support

  • IE8+
  • Firefox 4+
  • Current WebKit (Chrome, Safari)
  • Opera

Including

For the most common usage of Vex, you'll want to include the following:

<script src="vex.combined.min.js"></script>
<script>vex.defaultOptions.className = 'vex-theme-os';</script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />

That will give you all of the APIs for both Vex and Vex Dialog, and set you up with the "Operating System" theme. If you'd prefer another theme, check out Themes.

The vex.combined.min.js file includes:

  • vex.dialog.js which adds the functionality that mimics the native browser alert, confirm, and prompt (everything you see in the Basic docs examples).
  • vex.js which is a lightweight barebones generic dialog wrapper. See the Advanced usage docs for more information.

AMD / CommonJS

Note that when using a javascript dependency manager like RequireJS or CommonJS, you will not be able to use the vex.combined.min.js file. Instead, require vex.dialog and/or vex. (If you only wish to use vex.dialog, you do not need to require vex yourself, as it itself requires vex.)

Confirm Demo

One of the simplest ways to use Vex is to call vex.dialog.alert, vex.dialog.confirm, or vex.dialog.prompt. In this demo, we're using vex.dialog.confirm to ask the user to confirm the answer to a simple question.

Destroy the planet

Play with this demo:

vex.dialog.confirm
    message: 'Are you absolutely sure you want to destroy the alien planet?'
    callback: (value) ->
        console.log if value then 'Successfully destroyed the planet.' else 'Chicken.'

Login Demo

Here's a more complex demo in which we use vex.dialog.open (a more generic method which alert, confirm, and prompt all call internally) to build a login dialog.

Play with this example:

vex.dialog.open
    message: 'Enter your username and password:'
    input: """
        <input name="username" type="text" placeholder="Username" required />
        <input name="password" type="password" placeholder="Password" required />
    """
    buttons: [
        $.extend({}, vex.dialog.buttons.YES, text: 'Login')
        $.extend({}, vex.dialog.buttons.NO, text: 'Back')
    ]
    callback: (data) ->
        return console.log('Cancelled') if data is false
        console.log 'Username', data.username, 'Password', data.password

Learn More

To learn more about how to use Vex, visit our API pages.

Credits

Vex was built by Adam Schwartz