Javascript Vex.js Example to Show Popup Modal Dialog Windows in Browser

Welcome folks today in this blog post we will be using the vex.js library to show popup modal dialog windows in browser using javascript. All the full source code of the application is shown below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.0.0/css/vex.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.0.0/css/vex-theme-top.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.1.0/css/vex-theme-plain.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.1.0/css/vex-theme-wireframe.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.1.0/css/vex-theme-os.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.1.0/css/vex-theme-bottom-right-corner.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vex-js/4.1.0/css/vex-theme-flat-attack.min.css">
</head>

<body>
    <div>
        <button id="trigger">Click me</button>
    </div>
    <select id="theme">
        <option value="vex-theme-os" selected>OS Theme</option>
        <option value="vex-theme-flat-attack">Flat Attack Theme</option>
        <option value="vex-theme-bottom-right-corner">Bottom Right Corner Theme</option>
        <option value="vex-theme-plain">Plain Theme</option>
        <option value="vex-theme-top">Top Theme</option>
        <option value="vex-theme-wireframe">Wireframe Theme</option>
    </select>

    <div>
        <h3>Notes</h3>

        <pre id="notes"></pre>
    </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vex-js/3.0.0/js/vex.combined.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div>

<button id="trigger">Click me</button>

</div>

<option value="vex-theme-os" selected>OS Theme</option>

<option value="vex-theme-flat-attack">Flat Attack Theme</option>

<option value="vex-theme-bottom-right-corner">Bottom Right Corner Theme</option>

<option value="vex-theme-plain">Plain Theme</option>

<option value="vex-theme-top">Top Theme</option>

<option value="vex-theme-wireframe">Wireframe Theme</option>

</select>

<div>

<h3>Notes</h3>

</div>

</body>

</html>

As you can see we are including the libraries for the vex.js cdn and also we are including the js library cdn as shown above. And also we have the button to trigger or show the modal popup window. And then we have the select element to allow the user to select the theme of the modal popup window.

script.js

 vex.defaultOptions.className = document.getElementById('theme').value;

    function showDialog(cb) {
        vex.dialog.prompt({
            message: 'What planet did the aliens come from?',
            placeholder: 'Planet name',
            callback: function (value) {
                cb(value)
            }
        })
    }

    $('#trigger').click(function () {
        showDialog(function (notes) {
            $('#notes').text(notes);
        })
    });

    
    $("#theme").change(() => {
        vex.defaultOptions.className = document.getElementById('theme').value;
    })

vex.defaultOptions.className = document.getElementById('theme').value;

function showDialog(cb) {

vex.dialog.prompt({

message: 'What planet did the aliens come from?',

placeholder: 'Planet name',

callback: function (value) {

cb(value)

}

})

}

$('#trigger').click(function () {

showDialog(function (notes) {

$('#notes').text(notes);

})

});

$("#theme").change(() => {

vex.defaultOptions.className = document.getElementById('theme').value;

})

As you can see we are setting the theme of the vex.js library at the top and then we are attaching the onclick listener to the button and where we are calling the showDialog() method to show the popup window and here we are using the prompt() method to show the prompt dialog box.

Similarly we can show the basic theme popup window using the alert() method as shown below

vex.dialog.alert('Thanks for checking out vex!')

1	vex.dialog.alert('Thanks for checking out vex!')

And also we can show the confirm modal window using the confirm() method as shown below

vex.dialog.confirm({
    message: 'Are you absolutely sure you want to destroy the alien planet?',
    callback: function (value) {
        console.log(value)
    }
})

vex.dialog.confirm({

message: 'Are you absolutely sure you want to destroy the alien planet?',

callback: function (value) {

console.log(value)

}

})