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

Vex Official Website

Vex Official Github

Basic Example

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

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

vex.defaultOptions.className = 'vex-theme-os'
vex.dialog.alert({
    message: 'Testing the wireframe theme.',
    className: 'vex-theme-wireframe' // Overwrites defaultOptions
})

List of Vex Themes

Default Options

defaultOptions: {
    content: '',
    unsafeContent: '',
    showCloseButton: true,
    escapeButtonCloses: true,
    overlayClosesOnClick: true,
    appendLocation: 'body',
    className: '',
    overlayClassName: '',
    contentClassName: '',
    closeClassName: '',
    closeAllOnPopState: true
}