Creating a Modular 'Waiting' dialog in javascript

Have you ever needed to create a modular pop up that displayed a message to the user while you did some processing in the background? I have and I got fed up of constantly creating a new modular pop up each time.

The following javascript code is easy to use and is based upon the grayOut javascript function.

This snippet of code creates a modal dialog box. This is useful for times when you want to make the user wait while you do something in the background or if you would like to make the user aware of something on the page. While the dialog box is active, most interactive elements on the page (links, etc) are inactive.

The dialog box is dynamically created and can be customized to a certain height and width. The dialog box has a high z-index and should be placed above most other elements. Items which have a higher z-index than the dialog box will appear on top of the dialog box.

By default the dialog box has a z-index of 100.

Other default parameters are:

• height - 25% of the page height
• width - 35% of the page width
• opacity - 90% (i.e. semi-transparent)
• border style - solid
• border color - black
• border width - 3px
• text alignment - center
• many others ...

All of the above can be configured to your liking. Look at the comments in the script for more customization features.

Example. This snippet has been tested in Firefox 2, Safari 3, and Internet Explorer 7.

function modular_waiting(vis, msg, options) {
// Pass true to show the dialogue screen, false to hide
// options are optional.  This is a JSON object with the following (optional) properties
// opacity:0-100         // Lower number implies a more transparent dialog box
// zindex: #             // HTML elements with a higher zindex appear on top of others with a lower number
// height: 0-100         // The height in percentage terms relative to the browser screen
// width:  0-100         // The width in percentage terms relative to the browser screen
// name: text         // A name for your dialog box - this is what you will refer to when showing and hiding the dialog
// align: text         // Should the text be placed in the: center, justify, left or right
// fontcolor: (#xxxxxx)  // Standard RGB Hex color code
// fontweight: 100-900   // The boldness of the text in increments of 100. 900 implies maximum boldness
// bgcolor: (#xxxxxx)    // Standard RGB Hex color code
// borderwidth: #     // The thickness of the border
// bordercolor: (#xxxxxx)// The color of the border in HEX
// borderstyle: text     // The style of the border. One of dashed, dotted, double, groove, inset, none, outset, ridge, solid
// modular_waiting(false); // hide the dialog
// modular_waiting(true, 'my message to show here', {'name':'myName', 'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'}); // show the dialog
// Because options is JSON opacity/zindex/bgcolor are all optional and can appear
// in any order.  Pass only the properties you need to set.
var options   = options || {};
var zindex   = options.zindex || 100;
var height   = options.height || 25;
var width   = options.width || 35;
var opacity   = options.opacity || 90;
var opaque   = (opacity / 100);
var bgcolor   = options.bgcolor || '#FFDC75';
var fColor   = options.fontcolor || '#0000FF';
var fWeight  = options.fontweight || 600;
var bcolor   = options.bordercolor || 'black';
var bstyle  = options.borderstyle || 'solid'
var bwidth  = options.borderweight || '3px'
var align   = options.align || 'center';
var __div_id__ = options.name ||  '__modular__popup__';

var dark=document.getElementById(__div_id__ );

if (!dark) {
var tbody = document.getElementsByTagName("body")[0];
var tnode = document.createElement('div');       // Create the layer.
tnode.style.position='fixed';                 // Position absolutely
tnode.style.overflow='auto';
tnode.style.display='none';                      // Start out Hidden
tnode.id=__div_id__ ;                    // Name it so we can find it later
tbody.appendChild(tnode);                        // Add it to the web page
dark=document.getElementById(__div_id__ );       // Get the object.
}

if (vis) {
var txt = document.createElement('font')
txt.setAttribute('color',fColor);
txt.style.fontWeight = fWeight;
txt.innerHTML = msg.replace(/\"/g,""").replace(/\'/g,"'").replace(/\/g,">").replace(/\n/g,"<br/>")

dark.style.border = bwidth + " " + bstyle + " " + bcolor;
dark.setAttribute('align',align);
dark.style.opacity=opaque;    
dark.style.MozOpacity=opaque; 
dark.style.filter='alpha(opacity='+opacity+')';
dark.style.zIndex=zindex;
dark.style.backgroundColor=bgcolor;
dark.style.width= width+'%';
dark.style.height= height+ '%';
dark.style.display='block';
dark.style.cursor = 'wait';
dark.appendChild(txt);
dark.style.left =  '40%'
dark.style.top  =  '50%'
} else {
// TODO - should i remove the element?
dark.style.display='none';
dark.innerHTML = "";
}
}

Activate/Deactivate with a function call to modular_waiting(vis, msg, options).

vis is a true/false variable. If you pass true, the dialog will appear. If you pass false, the dialog will be removed.

"msg" is the message that you would like to display.

options is an optional JSON object this allows you to send only the properties you want modified. You don't have to pass options if you don't want. modular_waiting(true,"Hello world") and modular_waiting(false) will work quite nicely.

To set all of the options, do the following {'opacity':'70', 'bgcolor':'#0000FF', 'zindex':'25', 'height':'50','height':'50', 'name':'myPopUpDialog', 'align':'left', 'fontcolor':'red', 'fontweight':'900', 'bgcolor':'yellow', 'borderwidth':'5', 'bordercolor':'blue', 'borderstyle':'dotted' }. This will create a somewhat transparent dialog box that covers approximately 50% of the window, with text aligned left, colored red and bold on a yellow background and a dotted, blue border!

Feel free to change the values yourself!

Order doesn't matter, mix and match however you wish.