JavaScript dialog box

More...

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.

See the following example:

REDIPS.dialog.show(520, 400, 'Email.aspx');

In this case, REDIPS.dialog will load Email.aspx 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 the 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.myhandler_displayed = function () {
    document.getElementById('message').innerHTML = 'Dialog displayed';
};

// event handler called after dialog is closed
REDIPS.dialog.myhandler_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');

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

This entry was posted on August 28, 2009 and is filed under JavaScript

Related posts

65 Responses to JavaScript dialog box

  1. dbunic says:

    @fpiat - That's the right place for applying changes. But, maybe you could leave the code "as is" by calling simple function and inside simple function write any JS code like calling object methods. This is just a hint and I think it should work as well.

    Anyway, thanks for posting your code modification.
    Cheers!

  2. Mark E says:

    When adding REDIPS.dialog.myhandler_displayed = function () { } to execute some javascript when the dialog is displayed, this does not fire the initial time the dialog is opened. It only fires the second time the dialog is opened.

  3. dbunic says:

    @Mark E - Inside redips4.tar.gz package is folder example00 with event handlers demo. After clicking on "Simple dialog" link, text in background is displayed. This works first time and every other click after. I have tested code in latest FF, Google Chrome and IE8, and all browsers execute example00 correctly. Can you prepare and send me problematic JS code so I can try to fix the bug (if there is any). Thanks in advance!

  4. GARY OBED RODAS FLORES says:

    how to manage the functions of the buttons, I'm new at this

  5. dbunic says:

    @Gary - Here are examples how to define dialog with buttons and how to call a function after button click (with or without parameter):

    # Action on second button
    REDIPS.dialog.show(200, 100, 'Action on second button', 'Cancel', 'Yes|button2')
    
    # Action on both buttons (with parameter on second button)
    REDIPS.dialog.show(200, 100, 'Action on both', 'Cancel|button1', 'Yes|button2|hello')
    

    You will find complete source code in redips4.tar.gz package (download link is below post title).

Leave a Reply

Your email address will not be published. Required fields are marked *

*

In case of posting HTML tags or JavaScript code please convert special characters to HTML entities.
Especially pay attention to convert "<" character to "&lt;" entity!