JavaScript dialog box

If you aren't satisfied with prompt, confirm, alert or window.open, then you need JavaScript dialog box. Dialog box is emulated with two DIVs. First DIV overlays whole page (transparency is styled to 60%) while second DIV is positioned to the page center. That's nothing new but JavaScript code is short, well commented and closed in own namespace (for easier integration with other frameworks).

Please try demo and see how to call REDIPS.dialog.show() function:

1. Simple dialog
   REDIPS.dialog.show(120, 100, 'Simple dialog')
2. Bigger dialog with renamed button
   REDIPS.dialog.show(200, 200, 'Bigger dialog with renamed button', 'OK')
3. Dialog with two buttons
   REDIPS.dialog.show(200, 100, 'Dialog with two buttons', 'Cancel', 'Yes')
4. Action on second button
   REDIPS.dialog.show(200, 100, 'Action on second button', 'Cancel', 'Yes|button2')
5. Action on both buttons (with parameter on second button)
   REDIPS.dialog.show(200, 100, 'Action on both buttons', 'Cancel|button1', 'Yes|button2|hello')
6. Dialog with image
   REDIPS.dialog.show(100, 90, '/path/img1.png')
7. Dialog with more images
   REDIPS.dialog.show(100, 90, '/path/img1.png,/path/img2.png,/path/img3.png')
8. Dialog with more images and text
   REDIPS.dialog.show(100, 90, 'Hello!|/path/img1.png,/path/img2.png,/path/img3.png')
9. Dialog with image and text
   REDIPS.dialog.show(150, 120, 'Have a nice day!|/path/spider1.png')
10. Dialog with image, text and action on second button
    REDIPS.dialog.show(150, 120, 'Delete image?|/path/spider1.png', 'Cancel', 'Yes|button2')

You have option to display one or two buttons in dialog box. After button is pressed, dialog box will be closed. That is the simplest scenario. For each button you can define label, function name and parameter. Labels, function names and parameters are separated with "|". If text ends with jpg, jpeg, gif or png, script will prepare IMG tag and display one or more images. REDIPS.dialog.show() has fade in / out overlay from 0% to 60%. You have option to change maximum overlay transparency and fade speed. For example:

window.onload = function () {
    REDIPS.dialog.init();          // initialize dialog
    REDIPS.dialog.op_high = 40;    // set maximum transparency to 40%
    REDIPS.dialog.fade_speed = 18; // set fade spead (delay is 18ms)
};

And how looks REDIPS.dialog.show() function:

show = function (width, height, text, button1, button2) {
    var input1 = '',    // define input1 button
        input2 = '',    // define input2 (optional) button
        param  = '',    // optional function parameter
        img_extensions, // needed for image search
        div_img = '',   // prepared DIV with images
        div_text = '',  // text wrapped with DIV
        img_text = '';  // text under image
    //  set button1 default value
    if (button1 === undefined) {
        button1 = 'Close';
    }
    // set dialog width, height and calculate central position
    dialog_width  = width;
    dialog_height = height;
    position();
    // if text ends with jpg, jpeg, gif or png, then prepare img tag
    img_extensions = /(\.jpg|\.jpeg|\.gif|\.png)$/i;
    if (img_extensions.test(text)) {
        // text can precede jpg, jpeg, gif or png image, so search for separator
        img_text = text.split('|');
        // separator doesn't exist, display only image without text
        if (img_text.length === 1) {
            div_img = image_tag(img_text[0]);
        }
        // otherwise, prepare image and text DIV
        else {
            div_img = image_tag(img_text[1]);
            div_text = '<DIV class="text">' + img_text[0] + '</DIV>';
        }
    }
    // else prepare text within DIV
    else {
        div_text = '<DIV class="text">' + text + '</DIV>';
    }
    // prepare input1 HTML
    input1 = input_html(button1);
    // prepare optional button2
    if (button2 !== undefined) {
        // prepare input2 HTML
        input2  = input_html(button2);
    }
    // set HTML for dialog box - use table to vertical align content inside
    // dialog box (this should work in all browsers)
    dialog_box.innerHTML = '<TABLE><TR><TD valign="center" height="' + height + '" width="' +
                            width + '">' + div_img +
                            div_text +
                            '<DIV>' + input1 + input2 + '</DIV>' +
                            '</TD></TR></TABLE>';
    // show shade and dialog box
    shade.style.display = dialog_box.style.display = 'block';
    // hide dropdown menus, iframes & flash
    visibility('hidden');
    // show shaded div slowly
    fade(REDIPS.dialog.op_low, 10);
};

In redips4.tar.gz (5.3KB) package you will find demo and source code. At the end it's important to mention that script passes JSLint verification. And yes, JSLint hurt my feelings ...

Related posts

• Image hover using Javascript
• JavaScript Drag and Drop example 4
• JavaScript Drag and Drop example 3
• JavaScript Drag and Drop example 2
• Maintain vertical scroll position

This entry was posted on Friday, 28.08.2009. at 12:57and is filed under JavaScript. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.