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



    message: 'Are you absolutely sure you want to destroy the alien planet?',
    callback: function (value) {
        if (value) {
            console.log('Successfully destroyed the planet.')
        } else {







Login Alert Example{
    message: 'Enter your username and password:',
    input: [
        '<input name="username" type="text" placeholder="Username" required />',
        '<input name="password" type="password" placeholder="Password" required />'
    buttons: [
        $.extend({}, vex.dialog.buttons.YES, { text: 'Login' }),
        $.extend({}, vex.dialog.buttons.NO, { text: 'Back' })
    callback: function (data) {
        if (!data) {
        } 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'
    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