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”

  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