vex

Beautiful, functional dialogs in vanilla JavaScript

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 (5.5kb minified and gzipped), 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

Lightweight with no external dependencies

Looks and behaves great on mobile devices

Open multiple dialogs at once and close them individually or all at once

UMD support

Requirements

None!

Browser Support

vex will run in any ES5-compatible environment, and includes polyfills for classList and Object.assign.

This means the following browsers are compatible with vex:

IE 9+

Edge 13+

Firefox 21+

Chrome 23+

Safari 6+

Opera 15+

Including in your project

For the most common usage of vex, you'll want to include vex, vex-dialog, the vex CSS file, and a theme file.

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.

Module Systems

Note that when using a JavaScript module system like RequireJS or CommonJS, especially as part of a build system like Browserify or Webpack, you will not be able to use the vex.combined.min.js file. Instead, require vex and register the vex-dialog plugin.

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.