Highly Configurable JS Modal & Dialog Box Library - Vex
File Size: | 2.33 MB |
---|---|
Views Total: | 5824 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.