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