JavaScript & CSS3

Smooth CSS3 animations

Fully Customizable

20 customizable options

Lightweight

Smooth CSS3 animations

7 Preset Templates

Including alert, prompt & progress

Features

  • Lightweight: 20Kb
  • JavaScript + CSS3
  • No external images
  • 20 customizable options
  • 7 preset template
  • Fully documented
  • HIDPI ready
  • Draggable
  • Traceless (leaves the DOM intact)

Demos

DialogBox.js

DialogBox.js is a lightweight script for easily generating custom popup dialog boxes. Go ahead, give it a shot!

Preset Templates

For quick and dirty jobs, use one of the preset dialog box templates. These templates are mainly useful for showing information and giving feedback to the user.

document.getElementById('error').onclick = function()
{
    DialogBox.error({
        title: 'Some Title', 
        html:  'Some text...'
    });
}

Progress Bar

The progress bar dialog box can be used to show the progress of a certain task as it is being performed. The following example simulates a download progress (don't worry, no file is downloaded).

DialogBox.progress({
    onOpen: function(){
        DialogBox.setProcess( 34 ); // Set the process to a percentage between 0 and 100
    }
});

Custom Dialog Boxes

Dialog boxes can be fully customized by adjusting one or more of the available options.

DialogBox.open({
    width:         300,
    height:        300,
    draggable:     false,
    buttons:       [{
        text: 'Got it!',
        click: function() {
            alert('Dialog Box closed!');
            return true; // Return true to close the dialog box
        }
    }],
    html:          'This is a Custom Dialog Box...',
    animationTime: 500,
    showTopBar:    false
});

HTML content

HTML can be used as the dialog box's content. Here is an example of a YouTube video inside a dialog box.

Passing Arguments to Click Events

The configuration settings of the active dialog box are passed to the click event via the this variable. It can be used to call the same dialog box again.

DialogBox.open({
    title:     'Self-invoking Dialog Box',
    html:      'Some html...',
    buttons: [
        {
            text: 'Reopen',
            click: function() {DialogBox.open(this);}
        },
        {
            text: 'Close'
        }
    ]
});

Confirm

The 'confirm' is another preset template, that provides the user with the option to choose between "Yes" and "No". In addition to the title and html attributes, it takes 2 callbacks that are called depending on the user's selection.

NOTE: This type of dialog box forces the user to make a choice. The dialog box cannot be closed by clicking outside of it, and the close button is hidden.

DialogBox.confirm({
    title: 'confirm', 
    html:  'some text...',
    yes:   function() {
        // You can call another dialogbox from within the first one
        DialogBox.success({
            title: 'Yes/No Feedback', 
            html: 'You clicked <strong>yes</strong>'
        });
    },
    no:    function() {
        DialogBox.error({
            title: 'Yes/No Feedback', 
            html: 'You clicked <strong>no</strong>'
        });
    }
});

Prompt

The prompt takes an input from the user. The callback function takes the user's input as an argument.

DialogBox.prompt({
    title:       'Some Title', 
    htmlBefore:  'Some text to appear before the input',
    htmlAfter:   'Some text to appear after the input',
    inputs:      [
        {
            type:'text', // One of HTML5's input types
            placeholder: 'Input\'s placeholder',
            name: 'name', // Must be unique
            required: true
        }
    ],
    error: function( values ) { // Called if required inputs are empty
        return 'You must provide some input!';
    },
    success: function( values ) { // Called if required inputs are not empty or if there are no required inputs
        return 'Your name is <strong>'+values.name+'</strong>';
    }
});

Button Types

There are 4 different button types that can be used within a dialog box: positive, negative, primary, and secondary

DialogBox.open({
    buttons:       [
        {
            text: 'Primary',
            type: 'primary'
        },
        {
            text: 'Secondary',
            type: 'secondary'
        },
        {
            text: 'Positive',
            type: 'positive'
        },
        {
            text: 'Negative',
            type: 'negative'
        }
    ]
});

Events

The dialog box triggers different events that are despatched on the window object. To catch an event, add an event listener to the window object.

There are 5 available events that can be hooked onto:

  • dialogbox-open
  • dialogbox-before-close
  • dialogbox-close
  • dialogbox-drag-start
  • dialogbox-drag-stop
window.addEventListener('dialogbox-open', function (e) { 
    console.log('The dialog box is open'); 
}, false);

Positioning

The initial dialog box position can be set by providing x and y coordinates or by using a string like center or top. Try resizing the window to see how the position is maintained.

DialogBox.info({
    title:     'Some Title',
    html:      'Some text...',
    position:  {x: 'center', y: 'top'}
});

Spread the word about DialogBox.js!