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. @Aaron – It seems like a code page problem. Anyway, in a new 1.5.1 version you can define a character for close button. Here is example how to define Z instead of default character:

    // close button definition
    REDIPS.dialog.close_button = 'Z';
    

    Please download new version and try. Hope this improvement will help.
    Cheers!

  2. How can use redips in our .net application …

    It shows the error undefine var redips.

  3. @ashok kumar rathore – Here is example of initialization code for using REDIPS.dialog library. You should include REDIPS.dialog on you page:

    <script type="text/javascript" src="redips-dialog-min.js"></script>
    

    and execute initialization:

    // define redips_init variable
    var redips_init;
    
    // dialog box initialization (called from event)
    redips_init = function () {
        REDIPS.dialog.init();
        REDIPS.dialog.op_high = 60;
        REDIPS.dialog.fade_speed = 18;
        //REDIPS.dialog.close_button = 'Z';
    }
    
    // add onload event listener
    if (window.addEventListener) {
        window.addEventListener('load', redips_init, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', redips_init);
    }
    

    With these two steps REDIPS.dialog should work and you will be able to show dialogs.
    Cheers!

  4. Hi,
    I need to hide the dialog on timer event if no button clicked in dialog.
    I called the hide event and got an error. How can I impleent this ? Could you embed a timer parameter
    and close the dialog if no button pressed ?
    Thanks.

  5. @Yoni – I added REDIPS.dialog.shown property to the REDIPS.dialog library. Please download latest 1.5.5 version. Here is how to display dialog on click event:

    <a href="#" onclick="myShow(); return false;">Show dialog</a>
    

    JavaScript code looks like:

    // hide dialog after timeout
    function myHide() {
        REDIPS.dialog.hide('undefined');
    }
    
    // show dialog
    function myShow() {
        // show dialog
        REDIPS.dialog.show(150, 120, 'Simple dialog');
        // run timer (2 seconds)
        setTimeout(myHide, 2000);
    }
    

    Hope this will help you.

  6. Hi!

    I would like to use REDIPS.dialog instead of confirm JavaScript window, when I’m sending form. Now my code is like that:

    function fun() {
        if (!confirm('confirm send')) {
            return false;
        }
        return true;
    }
    

    When I’m using this code, everything work good, but I don’t link default JavaScript window, and I would like to use REDIPS.dialog. The problem is how to stop sending form when I click NO, and send it, when I click YES? This code not resolving problem, because my form is always send:

    function yes() {
        return true;
    }
    function no() {
        return false;
    }
    function fun() {
        return REDIPS.dialog.show(300,100,"confirm send","say yes| yes","say no| no");
    }
    
  7. @Marcin – REDIPS.dialog can replace confirm JavaScript window. Here is how:

    To avoid problems with returning TRUE / FALSE and submit button, use ordinary input button:

    <input type="button" value="Send query" onclick="fun()"/>
    

    To submit the form, action will be needed only on Yes button:

    function fun() {
        REDIPS.dialog.show(300, 100, 'Confirm send', 'say yes|mysubmit', 'say no');
    }
    
    function mysubmit() {
        document.forms[0].submit();
    }
    

    Please notice that there isn’t any space character in naming function after “|” character. When user clicks on No button, popup window will be just closed without any action.

    Hope this tips will be helpful and please feel free to ask if you have any problems with this solution.

  8. @dbunic – thx 4 answer.

    Last time I wrote more code, but when i wrote < and > (html special chars), this excerpt was deleted.

    I used your solution and it’s works great with my small modification.

    My code is:

    HTML code – form (N is number):

    <form action="action.php" id="myForm" method="post">
    <input type="hidden" name="action" id="action" value="">
    <input type="button" id="delete" name="delete" value="Delete" onclick="confirm_delete()">
    <input type="checkbox" name="msg_checkbox[N]" id="msg_checkbox_N" value="XYZ">
    <input type="button" id="save" name="save" value="Save" onclick="confirm_save()">
    </form>
    

    JavaScript code:

    function is_message_checked() {
        var msgs = document.getElementsByTagName('input');
        for (x in msgs) {
            if (msgs[x].name && msgs[x].name.toString().substr(0,12) === 'msg_checkbox') {
                if (msgs[x].checked === true) {
                    return true;
                }
            }
        }
        return false;
    }
    
    function confirm_delete() {
        if (!is_message_checked()) {
            REDIPS.dialog.show(300,100,"No messages selected","OK");
        }
        REDIPS.dialog.show(300,100,"Confirm delete","YES|sendForm|del","NO");
    }
    
    function confirm_save() {
        if (!is_message_checked()) {
            REDIPS.dialog.show(300,100,"No messages selected","OK");
        }
        REDIPS.dialog.show(300,100,"Confirm save","YES|sendForm|save","NO");
    }
    
    function sendForm(action) {
        if (action !== undefined) {
            $('#action').val(action);
        }
        $('#myForm').submit();
    }
    

    PHP Code:

    if (isset($_POST['msg_checkbox'])) {
        if ($_POST['action'] == "del") {
            // delete action
        }
        elseif ($_POST['action'] == "save") {
            // save action
        }
    }
    elseif (isset($_POST['action'])) {
        // no message selected action
    }
    

    I hope, this code will be usefull for other programmers.

  9. @Marcin – Thank you for posting complete solution. I’m sure it will be useful for others. Cheers!

    P.S.
    I have only made code beautifying with adding curly brackets and several spaces.

  10. I am customizing the dragable items in each cell of the table to contain a little more information. I would like to be able to open a form that edits these fields and to have a button that would open the same form to create a new dragable item to appear in the table. Any suggestions on how to do this? Thank you!

  11. Hi,

    I am working on a standard windows application. After performing some operations, the application opens a dialog box that consists of some windows buttons like “update”/ “save”/”cancel” in it.

    I want to click on “update” button using vbscript/javascript/windows scripting, Is it possible? If yes, please provide me the code.

    Thanks…………………..

  12. @Josiah – Here is code snippet to insert DIV element to table cell with id=”firstCell”. Hope this draft will help you to carry on with your project.

    // function inserts DIV element to the table cell
    createDiv = function () {
        var div,  // DIV element
            td,   // table cell
            text; // text in DIV element
        // create DIV element and text
        div = document.createElement('div');
        text = document.createTextNode('Hello');
        // set id of DIV element and classes ("drag" class is must)
        div.id = 'a12';
        div.className = 'drag red';
        // add text to the DIV element
        div.appendChild(text);
        // find TD where DIV element should be placed
        td = document.getElementById('firstCell');
        // append DIV element
        td.appendChild(div);
        // enable appended DIV element
        REDIPS.drag.enable_drag(true, div);
    };
    

    @umasankar – Unfortunately I’m not experienced windows developer so I could not provide you needed code. Generaly speaking, click on button is event. If event listener is attached then it can call a handler method. In your case you can call handler method directly from JavaScript / Windows script to achieve effect like button is clicked.

  13. ¡Javascript is great!

    Here i give you my updates to make iframes popped up very easy.
    Look at the result on my (spanish page) http://www.talleressanper.com/TalleresSanper/Contacto.aspx and click on “su pregunta desde aquí”.
    What is popping up is realy a normal page (in this case http://www.talleressanper.com/TalleresSanper/email.aspx)
    ¡¡ Please Do NOT send mail via http://www.talleressanper.com because this pageis from one of my customers!!

    The changes i have made (just add the new function):

    /* REDIPS.dialog.iframe(500, 500, 'Fax.aspx','true') */
    /* Opening... <iframe width="..px" height="..px" align="middle" src=".." scrolling="no"> */
    showframe = function (width, height, text, alignleft, aligntop) {
        REDIPS.dialog.shown = true;
        REDIPS.dialog.shownframe = true;
        dialog_width = width;
        dialog_height = height;
        position(alignleft, aligntop);
        dialog_html('<div><iframe src="' + text + '" height="' + dialog_height + '" width="' + dialog_width + '" scrolling="no" /></div>');
    };
    

    Have a nice coding…
    André Teunissen

  14. I have also a question:

    How can I communicate back to the owner page when a popup is closed?

    I think it must be something like popupDiv = REDIPS.dialog.show(…..);
    Set whatever result in the popupDiv (new) properties.
    Wait till popup is closed.
    Handle the popupDiv properties in the owner page where the REDIPS was called.

    But… I am (not yet) a good JavaScript programmer…

    How can I do that?

    Regards,
    André
    ç

  15. @Andreas Teunissen – Thank you for creating showframe method. The same effect can be achieved by adding ASPX suffix inside show() method:

    // if text contains .php, .html, .aspx then page will be fetched via AJAX
    page_extensions = /(\.php|\.html|\.aspx)/i;
    

    In new version 1.6.0, ASPX extension is added and REDIPS.dialog will load ASPX content using AJAX. In this case, server should return HTML code without <html> and <body> tags because AJAX response will be wrapped inside TD cell. Here is example of how to use this feature:

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

    Next, two event handlers are added: myhandler_displayed() and myhandler_closed(). JS code inside myhandler_closed() will be executed in a moment when dialog is closed. This way, control will be returned to the back page.

    REDIPS.dialog.myhandler_closed = function () {
        alert('Dialog closed');
    };
    

    Please download latest redips4.tar.gz package and there you will find redips-drag.js source code and example00 folder with event handlers example.

  16. Hi,

    First of all, thanks for the great script!

    I have a question, I use REDIPS to display one of my ASPX page, the page contain button to do some operation on the page like saving data to database.

    The issue is, when I have successful display the dialog to display my ASPX page, but when I click on the ASP button, the dialog is closed.

    How to make the dialog always visible until I click on the “x” on the corner instead of closing the dialog when I click on the button inside the ASPX page.

  17. @Harry – What action is taken after your button is clicked? Generally, dialog box should not be closed util your script closes the dialog or page refresh is happen. In case of page refresh, whole page will be reloaded and this will result with closing dialog also.

    My suggestion is to use AJAX for communication with server side instead of using plain form submission. If you will have further questions or I miss the point, don’t hesitate to post a comment. Cheers!

  18. Hi,
    I have seen dialog boxes in Redips javascript. It shows good example for developer. There i need to implement URL in show box with parameter as like,

    <a href="#" rel="nofollow">Simple dialog</a>
    

    but it shows “Unexpected token }” . Can u help me to solve this error and how to pass URL in this dialog box with argument. The output will be coming with list of details in dialog box.

  19. @shiva – Version 1.7.0 is published:

    - added REDIPS.dialog.html() method (defines custom HTML to show in dialog box)
    - added example01 to show how to display custom HTML in dialog box
    - redips-dialog-min.js is compressed with Google Closure Compiler
    - fixed bug when page is not found
    - comments in redips-dialog.js are written in JSDoc style
    

    In new version of REDIPS.dialog it’s possible to define custom HTML. Just download latest redips4.tar.gz package and try. Hope this add-on in 1.7.0 will solve your question. Here are instructions from example01 folder how to use new features:

    How to define 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’);

  20. Hi,
    thank’s a lot for sharing your work.
    I wanted to use an object.method for the callback function of the buttons.
    I have change the line 433 in redips-dialog.js

    window[function_call](function_param);
    

    to

    for (var i = 0, fns = function_call.split('.'), F = window; i < fns.length; F = F[fns[i++]]);
    F(function_param);
    

    I can now use objects and methods in the callback of a button:

    REDIPS.dialog.show(300,100,"confirm send","yes|Obj.method","no|ObjA.ObjB.ObjC.method");
    

    Any other changes to do?

Leave a Comment