JavaScript dialog box
If you aren't satisfied with prompt, confirm, alert or window.open, then you need JavaScript dialog box. Dialog box is emulated with two DIVs. First DIV overlays whole page (transparency is styled to 60%) while second DIV is positioned to 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:
-
Simple dialog
REDIPS.dialog.show(120, 100, 'Simple dialog') -
Bigger dialog with renamed button
REDIPS.dialog.show(200, 200, 'Bigger dialog with renamed button', 'OK') -
Dialog with two buttons
REDIPS.dialog.show(200, 100, 'Dialog with two buttons', 'Cancel', 'Yes') -
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 buttons', 'Cancel|button1', 'Yes|button2|hello') -
Dialog with image
REDIPS.dialog.show(100, 90, '/path/img1.png') -
Dialog with more images
REDIPS.dialog.show(100, 90, '/path/img1.png,/path/img2.png,/path/img3.png') -
Dialog with more images and text
REDIPS.dialog.show(100, 90, 'Hello!|/path/img1.png,/path/img2.png,/path/img3.png') -
Dialog with image and text
REDIPS.dialog.show(150, 120, 'Have a nice day!|/path/spider1.png') -
Dialog with image, text and action on second button
REDIPS.dialog.show(150, 120, 'Delete image?|/path/spider1.png', 'Cancel', 'Yes|button2')
You have 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. For example:
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)
};
And how looks REDIPS.dialog.show() function:
show = function (width, height, text, button1, button2) {
var input1 = '', // define input1 button
input2 = '', // define input2 (optional) button
param = '', // optional function parameter
img_extensions, // needed for image search
div_img = '', // prepared DIV with images
div_text = '', // text wrapped with DIV
img_text = ''; // text under image
// set button1 default value
if (button1 === undefined) {
button1 = 'Close';
}
// set dialog width, height and calculate central position
dialog_width = width;
dialog_height = height;
position();
// if text ends with jpg, jpeg, gif or png, then prepare img tag
img_extensions = /(\.jpg|\.jpeg|\.gif|\.png)$/i;
if (img_extensions.test(text)) {
// text can precede jpg, jpeg, gif or png image, so search for separator
img_text = text.split('|');
// separator doesn't exist, display only image without text
if (img_text.length === 1) {
div_img = image_tag(img_text[0]);
}
// otherwise, prepare image and text DIV
else {
div_img = image_tag(img_text[1]);
div_text = '<DIV class="text">' + img_text[0] + '</DIV>';
}
}
// else prepare text within DIV
else {
div_text = '<DIV class="text">' + text + '</DIV>';
}
// prepare input1 HTML
input1 = input_html(button1);
// prepare optional button2
if (button2 !== undefined) {
// prepare input2 HTML
input2 = input_html(button2);
}
// set HTML for dialog box - use table to vertical align content inside
// dialog box (this should work in all browsers)
dialog_box.innerHTML = '<TABLE><TR><TD valign="center" height="' + height + '" width="' +
width + '">' + div_img +
div_text +
'<DIV>' + input1 + input2 + '</DIV>' +
'</TD></TR></TABLE>';
// show shade and dialog box
shade.style.display = dialog_box.style.display = 'block';
// hide dropdown menus, iframes & flash
visibility('hidden');
// show shaded div slowly
fade(REDIPS.dialog.op_low, 10);
};
In redips4.tar.gz (5.3KB) 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 ...
Related posts
- Image hover using Javascript
- JavaScript Drag and Drop example 4
- JavaScript Drag and Drop example 3
- JavaScript Drag and Drop example 2
- Maintain vertical scroll position
Thank you! Works like a charm.
How do you call the function without clicking? I.E. automatically display the dialog when the page is opened?
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.
hi its really cool
can i get something like movable dialog
Thanks
Sri
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
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
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.
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.
@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
Beautiful! Thank you so much. I did not know I had to init the dialog box. I thought the show function already initiated the div.
Thank you so much,
Is it possible to get 3 buttons appear instead of 2?
Cheers
If I spent 1 min reading your library I would figure out how
It works great
Thanks again
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
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.
[...] Demo Tutorial Posted in ajax | Tags: alert box, confirm box, dialogbox, javascript [...]
Hi. Is it possible to show the dialog box from another javascript function? Thankyou.
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
@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.
hey the code is working great. thanks a lot.
Hi!
window.onload = function () {
REDIPS.dialog.init();
REDIPS.dialog.op_high = 10;
}
Do not change the op_high. Why ?