4.0.1
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.
alert, confirm, and promptvex will run in any ES5-compatible environment, and includes polyfills for classList and Object.assign.
This means the following browsers are compatible with vex:
For the most common usage of vex, you'll want to include vex, vex-dialog, the vex CSS file, and a theme file.
For HTML includes:
<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" />
For browserify/webpack, you'll still need to include the stylesheets on your page, but you can setup vex in your scripts:
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />
var vex = require('vex-js')
vex.registerPlugin(require('vex-dialog'))
vex.defaultOptions.className = 'vex-theme-os'
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.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.
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.
Play with this demo:
vex.dialog.confirm({
message: 'Are you absolutely sure you want to destroy the alien planet?',
callback: function (value) {
if (value) {
console.log('Successfully destroyed the planet.')
} else {
console.log('Chicken.')
}
}
})
Here's a more complex demo in which we use vex.dialog.open (a more generic method that 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 />'
].join(''),
buttons: [
$.extend({}, vex.dialog.buttons.YES, { text: 'Login' }),
$.extend({}, vex.dialog.buttons.NO, { text: 'Back' })
],
callback: function (data) {
if (!data) {
console.log('Cancelled')
} else {
console.log('Username', data.username, 'Password', data.password)
}
}
})
To learn more about how to use vex, visit our API pages.
vex was built by Adam Schwartz