JavaScript dialog box

If prompt, confirm, alert or window.open are not good enough then JavaScript dialog box can be considered as an alternative choice. This dialog box is emulated with two DIV elements. First DIV overlays whole page (transparency is styled to 60%) while second DIV is positioned at the page center. That’s nothing new but JavaScript code is short, well commented and closed in its own namespace (for easier integration with other frameworks).

Try demo and see how to call REDIPS.dialog.show() method. Here are examples of how JavaScript dialog box can be called:

1. Simple dialog
   REDIPS.dialog.show(150, 120, ‘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(300, 160, ‘Have a nice day!|/path/spider1.png’)
10. Dialog with image, text and action on second button
    REDIPS.dialog.show(300, 160, ‘Delete image?|/path/spider2.png’, ‘Cancel’, ‘Yes|button2’)
11. YouTube example
    REDIPS.dialog.show(640, 390, ‘youtube:2JWaWfKc5Vg’)

There is 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%. There is option to change maximum overlay transparency and fade speed. Dialog box should be initialized while settings of maximum transparency and fade speed are optional. Here is example of simple configuration:

window.onload = function () {
    REDIPS.dialog.init();               // initialize dialog
    REDIPS.dialog.opHigh = 40;          // set maximum transparency to 40%
    REDIPS.dialog.fadeSpeed = 18;       // set fade speed (delay is 18ms)
    //REDIPS.dialog.close_button = 'x'; // close button definition
};

If input value of REDIPS.dialog.show() is in format youtube:{youtubeId} then dialog box will display YouTube video. YouTube HTML code can be changed with public property REDIPS.dialog.youtube. The following example shows how to display generated HTML from server side:

REDIPS.dialog.show(520, 400, 'server.php');

In this case, REDIPS.dialog will load server.php page via AJAX and display HTML code inside dialog. In short, if second parameter defines PHP, HTML or ASPX page then dialog will ask Web server for content using AJAX.

Two event handlers can execute custom JS code in moment of displaying and closing dialog. Here is code snippet (full JS code can be found inside example00 folder of redips4.tar.gz package):

// event handler called after dialog is displayed
REDIPS.dialog.event.displayed = function () {
    document.getElementById('message').innerHTML = 'Dialog displayed';
};

// event handler called after dialog is closed
REDIPS.dialog.event.closed = function () {
    document.getElementById('message').innerHTML = 'Dialog closed';
};

It’s also possible to display custom HTML in two steps. First, custom HTML should be defined and then displayed. If REDIPS.dialog.show() method detects “html” as parameter then custom HTML will be displayed:

// how to define custom HTML
REDIPS.dialog.html('<strong>This is my HTML</strong>');

// how to show custom HTML
REDIPS.dialog.show(200, 200, 'html');

// buttons definition are optional, if needed they can be defined as well
REDIPS.dialog.show(200, 200, 'html', 'Close');

Package redips4.tar.gz contains all examples, source code and compressed lib prepared for production.