JavaScript dialog box

If you aren't satisfied with prompt, confirm, alert or window.open, then this JavaScript dialog box can be your choice. Dialog box is emulated with two DIVs. 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 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(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 example1
    REDIPS.dialog.show(640, 390, 'www.youtube.com/v/2JWaWfKc5Vg')
12. YouTube example2
    REDIPS.dialog.show(640, 390, 'www.youtube.com/v/8LtMk4DwLzA')

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%. You have 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.op_high = 40;         // set maximum transparency to 40%
    REDIPS.dialog.fade_speed = 18;      // set fade spead (delay is 18ms)
    //REDIPS.dialog.close_button = 'x'; // close button definition
};

If input value of REDIPS.dialog.show() contains URL to www.youtube.com video then dialog box will include embedded flash player. YouTube HTML code of flash player can be changed with public property REDIPS.dialog.youtube.

In redips4.tar.gz (8.5KB) 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 ...