Modal dialogs have been vilified by modern UX theory as overly disruptive. But sometimes you want to be disruptive, whether you want show a fatal error or need an unskippable dialog prompting the user for information.

This week, let's take a short look at Vex, a front-end library for displaying modal dialogs.

Vex provides three predefined dialog types: alert, confirm and prompt:

vex.dialog.alert('Library of the Week, what an honor!');

vex.dialog.confirm({
    message: 'Do you need my address to send me my trophy and cash prize?'
    callback: function(value) {
      console.log(value);
    }
});

vex.dialog.prompt({
  message: 'By the way, how much is that cash prize again?',
  callback: function(value) {
    console.log(value);
  }
});

Or you can call the generic method vex.dialog.open() and provide whatever contents you want for the dialog.

With the low-level API, you can hook into the open and close events, as well as overriding the DOM structure and CSS styles.

Take a look at the predefined themes, especially the "Bottom Right Corner" theme. As you can see, Vex is not limited to displaying dialogs. You can also implement components like notifications and more.