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
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()?
@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!