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.

67 thoughts on “JavaScript dialog box”

  2. How do you call the function without clicking? I.E. automatically display the dialog when the page is opened?

  3. Sam,
    if you want to show dialog box right after page is loaded (not on mouse click), just place function call in “body onload” like <body onload=”showDialog(120, 100, ‘Simple dialog’)”> Don’t forget to include showDialog function to this HTML page.

  5. How it’s cool!!!!!!!!!
    I have been looking for that kind of dialog boxes and i have fund it…
    I try to modify and add functionality to my web application using it…
    Thanks, it’s really simple

  6. I’m really interested in modifying this to display text and an image at the same time…do you have anything like that worked out yet? thanks…Aaron

  7. First short announcement – script is closed in own namespace, verified with JSLint and improved (displaying image and text at the same time). Integration with other frameworks should be easier and without conflict.

    @Sriram – Sorry, but for now script places dialog box only to the window center. If user resizes or scrolls browser window, dialog will be repositioned to the center …

    @Samiev – Thank you.

    @Aaron – dialog.js is improved, and now it’s possible to display image and text at the same time.

  8. I tried adding REDIPS.dialog.show(200, 200, ‘Bigger dialog with renamed button’, ‘OK’); to the body unload, but I keep getting an error that shade.style is null. The error only occurs if I use it onload instead of a click. I tried many things, but I need your help since I cannot figure it out. Thanks.

  9. @GargantulaKon – The error appears because show method is called before dialog initialization. At the end of the dialog.js file you will see onload handler:

    	
window.onload = function () {
    REDIPS.dialog.init();
};

    So, instead of calling REDIPS.dialog.show() in <body onload=”… please call show method after dialog initialization:

    	
window.onload = function () {
    REDIPS.dialog.init();
    REDIPS.dialog.show(200, 200, 'Bigger dialog with renamed button', 'OK');
};

    This should work, I hope ;)

  12. If I spent 1 min reading your library I would figure out how :P
    It works great
    Thanks again :P

  13. Hi,
    Appreciate what you made….
    One question though…
    I am trying to modify this in such a way, that the dialog shows multiple images next to each other (horizontally).
    I want a horizontal scrollbar if the images do not fit within the width of the dialog. So in the css I set the overflow to auto. Now if the images do not fit within the width of the dialog box, it starts the one that does not fit below the other picture(s). If I limit the height of the dialog box to force the overflow, it still does that, even outside the boundaries of the dialog box…..
    How do I get along to achieve this?
    Thanks

  14. Hi Paul,
    dialog box is updated and now is possible to show more then one image. Images should be separated with comma. Thanks for your comment.

  15. Pingback: JavaScript dialog box | Ajaxmint - Endless Ajax samples on jQuery, MooTools, ExtJS, Dojo, Prototype and PHP

  16. Hi. Is it possible to show the dialog box from another javascript function? Thankyou.

  17. Anyone knows how to transform REDIPS.dialog.show((120, 100, “Simple dialog”);return false to run it in PHP?

    ex. echo ‘REDIPS.dialog.show((120, 100, “Simple dialog”);return false);’;

    this not work :(

  18. @Ellen Westing – Yes, it should be possible. You only have to initialize dialog before calling from other JavaScript function.

    @gator – PHP is a server side engine used to generate HTML while REDIPS.dialog is a client side JavaScript interpreted by browsers. So, you can prepare HTML page with PHP to initialize dialog and show a message but you cannot call REDIPS.dialog directly from PHP. If I miss the point, do not hesitate to correct me. Kind regards.

  20. Hi!

    	
window.onload = function () {
    REDIPS.dialog.init();
    REDIPS.dialog.op_high = 10;
}

    Do not change the op_high. Why?

Leave a Comment