Welcome folks today in this blog post we will be talking about vex library for creating beautiful dialog alert boxes in javascript. All the examples source code will be given below.
Get Started
In order to get started we need to install the library
Basic Example
|
1 2 3 4 5 6 7 8 9 10 |
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.') } } }) |
Login Alert Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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) } } }) |
Inline Theme Example
|
1 2 3 4 5 |
vex.defaultOptions.className = 'vex-theme-os' vex.dialog.alert({ message: 'Testing the wireframe theme.', className: 'vex-theme-wireframe' // Overwrites defaultOptions }) |
List of Vex Themes
| Name | className |
|
|---|---|---|
| Default | vex-theme-default |
Example |
| Operating System | vex-theme-os |
Example |
| Plain | vex-theme-plain |
Example |
| Wireframe | vex-theme-wireframe |
Example |
| Flat Attack! | vex-theme-flat-attack |
Example |
| Top | vex-theme-top |
Example |
| Bottom Right Corner | vex-theme-bottom-right-corner |
Example |
Default Options
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
defaultOptions: { content: '', unsafeContent: '', showCloseButton: true, escapeButtonCloses: true, overlayClosesOnClick: true, appendLocation: 'body', className: '', overlayClassName: '', contentClassName: '', closeClassName: '', closeAllOnPopState: true } |
