Highly Configurable JS Modal & Dialog Box Library - Vex

Vex is a lightweight and customizable javascript modal library for creating stylish modal box & dialog box with lots of options, animation, skins and APIs.

Features:

• Fully configurable and customizable
• 4 Operating System Theme: Alert, Confirm, Prompt, and Normal.
• Customizable animations, overlay styles, and more.
• Lightweight (~2kb minifed + gzipped)
• Mobile device friendly

Basic Usage:

1. Include Vex javascript library and stylesheet files on the web page

<script src="vex.js"></script>
<link href="vex.css" rel="stylesheet">

2. Include a theme of your choice on the page. All possible themes:

• vex-theme-bottom-right-corner.css
• vex-theme-flat-attack.css
• vex-theme-os.css
• vex-theme-plain.css
• vex-theme-top.css
• vex-theme-wireframe.css

<link href="vex-theme-default.css" rel="stylesheet">

3. Create dialog boxes with the following JavaScript syntax.

// alert dialog
vex.dialog.alert(stringOrOptions)

// confirmation dialog
vex.dialog.confirm(options)

// prompt dialog
vex.dialog.prompt(options)

// plain dialog
vex.dialog.open(options)

4. Default global options.

callback: function () {},
afterOpen: function () {},
message: '',
input: '',
buttons: [
  dialog.buttons.YES,
  dialog.buttons.NO
],
showCloseButton: false,
onSubmit: function onDialogSubmit (e) {
  e.preventDefault()
  if (this.options.input) {
    this.value = serialize(this.form, { hash: true })
  }
  return this.close()
},
focusFirstInput: true

5. Default options for the Prompt dialog.

label: 'Prompt:',
placeholder: '',
value: ''

6. API methods.

// opens a dialog 
vex.open(stringOrOptions);

// closes a dialog
vex.close(vexInstanceOrId);

// closes the top dialog
vex.closeTop();

// closes all dialog
vex.closeAll();

// gets a single vex instance by id.
vex.getById(id);

// gets all instances
vex.getAll();

Changelog:

2019-01-20

• v4.1.0
• Doc updated

---

This awesome jQuery plugin is developed by HubSpot. For more Advanced Usages, please check the demo page or visit the official website.