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.

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 …

67 thoughts on “JavaScript dialog box”

  1. Great class. One question though, how do you pass a variable into the functions executed after the button press?

    For example this will ofcourse cause an error:

    onclick=”REDIPS.dialog.show(400, 100, ‘Test ?’, ‘Cancel’, ‘OK|askData(‘test’)’);return false”

    In a nutshell, the question is how to pass the word test as a variable to the functions Askdata()?

  2. @Alexander – Script is fixed. Now it should be able to change speed and opacity level.

    @Vladimir – I added third element to define function parameter. You can call dialog this way:

    onclick=”REDIPS.dialog.show(400, 100, ‘Test ?’, ‘Cancel’, ‘OK|askData|test’);return false”

    Parameter value “test” will be passed to the function “askData”. Don’t forget to define input parameter:

    function askData(param) {
        ...
        ...
    }
    

    Cheers!

  3. Great!
    But one question: Is it possible to have a dialog with text field for user input?

  4. Great class – thanks for sharing. I just came across two issues that almost drove me insane when I tried to incorporate it into one of my projects (xhtml strict):
    1. The input button (redips-dialog.js, line 171) threw an error in FF and Chrome, until I added a closing tag (/>).
    2. The CSS styles were never applied, until I changed the respective tags in redips-dialog.js to lowercase.
    Maybe this helps others.

    Cheers!

  5. @cs0815 – Thanks to your suggestions, REDIPS.drag library is improved. Changes are saved to the redips4.tar.gz package. This will certainly help and thank you once again. Cheers!

  6. Hi,

    Great class thanks for sharing.

    Suggestion :
    visibilty function should check if the browser agent is ie6 than only should it hide all the iframes, selects and object. otherwise it created a problem with the hidden selects which were only visible based on the interaction from the user in my application.

    Regards,

    Adnan Akbar

  7. Hi,

    Nice class thanks for sharing
    I have a question,how to submit the form on click on a button in dialog box.
    Actually I am calling REDIPS.dialog.show(200, 100, ‘Action on second button’, ‘Cancel’, ‘Yes|button2’);return false onsubmit or onclick of a submit button,but the form is not submitting.

  8. @adnan – You’re right, visibility() method could be completely removed from REDIPS.dialog class because IE6 support is no needed any more. Please see The Internet Explorer 6 Countdown.

    @vikram – Maybe you can call button2() function and inside button2() put form submission. Something like this:

    function button2() {
        document.forms[0].submit();
    }
    
  9. Hi,
    How to show dialog from html page.

    REDIPS.dialog.show(640, 390, ‘demo.php’)

  10. @kungto – New version 1.5.0 has option to show dialog from HTML (or PHP) page. Content of HTML page is closed within iframe and displayed in dialog box. Just download latest redips4.tar.gz package and try. Thank you!

  11. @Nikola – I suppose that your form should have defined target property like:

    <form method="get" action="submit.php" target="_parent">
    

    This way result from submit.php will not be displayed inside iframe of dialog box but inside of the main window. After submitting form, dialog box will dissapear because new page will be loaded.

  12. @Emanuele – I’m glad you solved the problem and thank you for using REDIPS.dialog library.

    Cheers!

  13. Hi,
    when I’m trying use redips dialog with niceforms (http://www.emblematiq.com/lab/niceforms/) javascript catch exception, and niceforms doesn’t work.
    If I delete excerpt:

    // initialize dialog box
    window.onload = function () {
        REDIPS.dialog.init();
        REDIPS.dialog.op_high = 60;
        REDIPS.dialog.fade_speed = 18;
    }
    

    niceforms works correct.

    Anyone have any idea how to use redips dialog with niceforms?

  14. @Marcin – The problem is in window.onload. If you open main.js, you will find line:

    window.onload = init;
    

    REDIPS.drag also needs to be initialized, so dialog demo uses the same event for initialization. In your case, first definition of window.onload is overwritten with second. Solution to this problem is to move REDIPS.dialog initialization to the main.js file. Here is how:

    function init() {
        if(!document.getElementById) {return false;}
        try {
            document.execCommand('BackgroundImageCache', false, true);
        } catch(e) {}
        if(document.getElementsByTagName("body")[0].className == "project") {stopShow = document.getElementById("stopShow"); startShow();}
        if((document.getElementsByTagName("body")[0].className == "home") || (document.getElementsByTagName("body")[0].className == "about awards")) {doTransitions();}
        if(document.getElementsByTagName("body")[0].className == "projects weekly") {fixFloats();}
        doRollovers();
        emailCloak();
        // initialize dialog box
        REDIPS.dialog.init();
        REDIPS.dialog.op_high = 60;
        REDIPS.dialog.fade_speed = 18;
    }
    

    … and don’t forget to delete window.onload initially used by REDIPS.drag lib. Your page should have only one definition of windows.onload event.

  15. @dbunic – thx for solution. I’m changed init function in niceforms.js:

    // Initialization function
    function NFInit() {
        try {
            document.execCommand('BackgroundImageCache', false, true);
        } catch(e) {}
        if(!document.getElementById) {return false;}
        // initialize dialog box
        REDIPS.dialog.init();
        REDIPS.dialog.op_high = 60;
        REDIPS.dialog.fade_speed = 18;
        //alert("click me first");
        NFDo('start');
    }
    

    and I deleted:

    // initialize dialog box
    window.onload = function () {
    REDIPS.dialog.init();
    REDIPS.dialog.op_high = 60;
    REDIPS.dialog.fade_speed = 18;
    }
    

    from header of my page.

    Now it’s working gr8.

Leave a Comment