Create, Control, & Customize Website’s Modal Window with Vex

By . in Web Design. Updated on .

A modal window is very useful when you want to make users interact with your site. Occasionally, a modal window is called a modal box as the window is used to display the dialog box. In a previous article we had guided you through a tutorial on how to make modal windows using Bootstrap Plugin.

In this post we will introduce you to another great helper for creating modal windows, using jQuery library namely Vex.

Vex is a complete and highly customizable Javascript library that helps you create modal windows with ease. This light jQuery plugin replaces the browser native dialog box.

Basic Setup

First, we need to prepare the Vex script. You can download it here. Then, include the latest jQuery into the header with the following script.

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

To use Vex, you have to include the vex.js and vex.css files. Rather than using vex.js and vex.dialog.js, you can just include vex.combined.js or vex.combined.min.js.

Now, we’ll add those Vex libraries to the header like so.

<script src="vex.combined.min.js"></script>
<link rel="stylesheet" href="vex.css" />
<link rel="stylesheet" href="vex-theme-os.css" />

In the above script, I include vex-theme-os.css which is a different ready-to-use Vex theme. To use another theme, you can see the documentation included with the demo here.

Applying Vex

The most basic methods in Vex are vex.dialog.alert, vex.dialog.confirm and vex.dialog.prompt. And there is vex.dialog.open which is the combination of those methods for more advance usage e.g. to create form, login or multiple modal window.

And now, we’ll try to build a simple login modal window using vex.dialog.open method. Before we start on the method, we must first apply the theme we used with the defaultOptions.className option. To apply the theme, you can easily add the theme name as a value option like so.

vex.defaultOptions.className = 'vex-theme-os';

For more option API documentation, you can head over to Vex’s advanced page.

As mentioned before, the vex.dialog.open method is basically the combination of 3 other methods. The following code is a more complex demo in which we call alert, confirm, and prompt internally to build a login dialog.

<script>
vex.defaultOptions.className = 'vex-theme-os';
vex.dialog.open({
  message: 'Please enter your username and password:',
  input: "<input name=\"username\" type=\"text\" placeholder=\"Username\" required />\n<input name=\"password\" type=\"password\" placeholder=\"Password\" required />",
  buttons: [
    $.extend({}, vex.dialog.buttons.YES, {
      text: 'Login'
    }), $.extend({}, vex.dialog.buttons.NO, {
      text: 'Back'
    })
  ],
});
</script>

So, our login box will appear as follow.

Final Thought

There are many other tools to create modal window out there, but Vex is a rather complete and highly configurable one. You can add alerts, prompts, confirmation, forms or other input options to the box and even animate it. Other great features are multiple modal windows and dialog boxes inside modal boxes, it runs great and smoothly in mobile devices.

Vex also comes with ready-made themes to make the dialog meet your style, be it on CSS or SASS. It is also compatible with most modern browsers and very light – only under 7kb minified (2kb minified + gzipped).

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail