Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

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

Posted on March 24, 2023

 

 

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!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>

 

 

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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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

 

 

JavaScript
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

 

 

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

 

 

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme