Vex Javascript Library For Beautiful Dialog Alert Boxes Full Crash Course with Examples

Vex Javascript Library For Beautiful Dialog Alert Boxes Full Crash Course with Examples

 

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)
        }
    }
})

 

See also  Build a Sapui5 PDF Viewer With Custom Validation Error Messages and Download PDF Button in Browser Using Vanilla Javascript Full Project For Beginners

 

 

 

 

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

 

 

 

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
See also  How do I Check if an element is hidden in jQuery Using :hidden & :visible Selector in Browser Full Tutorial For Beginners

 

 

Default Options

 

 

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

 

 

 

Leave a Reply