Window modal dialogs for browser

Modal dialog

Window modal dialogs for browser

Changelog is in the bottom of this readme.

var Dialog = require('modal-dialog');
var d = new Dialog;
d.title = 'Title of my window';
d.content = 'Lorem lipsum dolor sit amet...'; = 'Info in footer';
d.addButton('OK', function() {
    alert('OK button was clicked');

If you want to set some element directly into header or footer, you can set these variables. Title and info variables are just shortcuts for setting texts.

d.header = $('<div>my custom header</div>');
d.footer = $('<div>my custom footer</div>');

This modal dialog comes with one simple style which is sincerely horrible, so I recommend to use your own style. You just have to disable the default one.

Dialog.styles = false;

Now you can write your own styles in your css files. Modal dialog has got some classes for you. Names of these classes can be also changed in variable classes. Here are the default ones.

Dialog.classes = {
    container: 'modal_dialog',
    title: 'title',
    header: 'header',
    content: 'content',
    footer: 'footer',
    info: 'info',
    buttons: 'buttons',
    button: 'button',

Settings described above were default settings, but you can set these options for each dialog separately.{
    styles: false
  • width
  • maxHeight
  • duration (speed of animation in jquery)
  • zIndex
  • styles (disable or allow default styles)
  • classes (override default classes names)
  • overlay (list of options for overlay package)
  • 1.0.0
    • Initial version