SuperDialog v1.0 by Markus F. Hay

Each dialog uses a different titlebar icon and background image so that dialog types are distinguishable (is that a word?). In addition, you can completely style the HTML you input by either including an external stylesheet or by using inline styling.

All styling to the dialog itself is done inline so that an external stylesheet is not required. This was done primarily because the dialog may or may not get called within an IFRAME. If we are in an IFRAME, we want to overlay the entire page and not just the IFRAME window, and that would have meant including a stylesheet in the parent window instead of the IFRAME window. Rather than having to worry about where to include the stylesheet, I decided I would make all styles inline. If you want to manipulate them (I would use extreme caution if you want to change the look & feel of the dialog), then you can do so in the SuperDialog constructor where these values are set as member/property variables.

Also note that SuperDialog supports overlaying pages that use IFRAMEs and NOT FRAMESETs. If the dialog is being called within a FRAMESET, it will only overlay that particular FRAME. That is because it's impossible (to my knowledge) to overlay a FRAMESET. Therefore, don't use FRAMESETs and design your site using IFRAMEs instead.

There is a "special" issue that is related to IE only. Sometimes the right side of the page will have a small area that is not overlayed. This is due to the way IE measures it's margins. Adding the following style to the page will fix this issue (but it will also affect the appearance of the entire page): body { margin: 0 auto; }

Another issue that can occur is a style conflict, regardless of the browser being used. If the dialog appears mutilated (or some elements seem out of place), then check that there are no unecessary generic <div>, <img>, <span>, or <input> style attributes in the attached stylesheet (or in head style tags). If so, drop me an email and let me know what is being inherited by the dialog (or more specifically, which attribute is forcing the dialog to look goofy) and I'll add an inline style attribute that will override any attached stylesheets.

Finally, if you are using Flash on your pages, the Flash object may appear above the overlay. This is a common issue when dealing with Flash and DHTML layers. You can find information on how to address this issue HERE.

The following browsers have been tested with this script:

• IE 5.01 SP2 - The fade effect does not work, but the background is darkened (completely) and the dialog still appears. Also, no .png transparency support is offered, so the top corners will show a light background color instead of being rounded. The buttons on the dialog do not change the cursor to pointer when moused over, due to no CSS2 support.
• IE 5.5 SP2 - No .png transparency, so the top corners will show a light color instead of being rounded. I know that this version of IE supports .png transparency, but I couldn't get it to work properly and after hours of verbally abusing my monitor, I decided it wasn't worth it because there just aren't enough people using this version anymore. Also, the cursor does not change to pointer when buttons are moused over, again, due to lack of CSS2 support.
• IE 6.0 SP2 - No known issues.
• IE 7.0 - No known issues.
• Opera 9.01 - No known issues.
• Firefox 1.5+ - No known issues, of course.

You will notice that there are 2 JavaScript files to choose from: superdialog.js and superdialog_source.js. You should always include superdialog.js because it has been compressed and obfuscated (comments and extra whitespace removed and variable names shortened) and smaller in file size (~14k) than that of the source version (~31k).

• PURPOSE - To set the action that should be taken when a dialog button (Okay, Yes, No, Cancel) is pressed. Note that the "action()" function is called internally by the "SuperDialog" object when a button is clicked, so it's necessary to assign your custom functionality to it, hence the reason we are doing a function assignment instead of calling "action()" directly.
• EXAMPLE

myDialog.action = doAction;

function doAction() {
	switch(myDialog.getButtonClicked()) {
		case "no":
		case "cancel":
			break;	// do nothing
		case "yes":
		case "okay":
			// do something
			break;
	}
}

• PURPOSE - To return the value of the button that was clicked on the dialog. This function is typically called in the overidden myDialog.action() function so that a decision can be made depending on what the user clicked.
• RETURNS - The following lowercase values:
• "okay" - if the "Okay" button has been clicked.
• "cancel" - if the "Cancel" button has been clicked.
• "yes" - if the "Yes" button has been clicked.
• "no" - if the "No" button has been clicked.
• EXAMPLE

if (myDialog.getButtonClicked() == "okay") {
	// the user clicked the "Okay" button...
} else if (myDialog.getButtonClicked() == "cancel") {
	// the user clicked the "Cancel" button...
} else {
	// the user clicked the "X" button, which will close "SuperDialog".
}

• PURPOSE - To set the details of the dialog, typically used to give some kind of informative/instructive message to the user.
• ARGUMENTS - Accepts a single argument as a string, which can contain plain text or valid HTML.
• EXAMPLE

myDialog.setDetails('Hello there!<br /><br />This is my cool new dialog that contains a ' +
		'link to <a href="http://www.google.com" target="_blank">Google</a>.');

myDialog.setDetails('The following form fields are required:<ul>' +
		'<li>first name</li><li>last name</li><li>email address</li></ul>' +
		'Please click "Okay" to close this dialog and try again.');

• PURPOSE - To set the dialog type, title, and details with a single function call. myDialog.setDialog() combines the functionality of myDialog.setType(), myDialog.setTitle(), and myDialog.setDetails().
• ARGUMENTS - The arguments are passed as strings in order of type, title, then details. If you want to omit the title, then pass in a blank string ('' or "").
  • sType - The type of dialog to be used. Possible values are: "confirm", "error", "info", "warning", and "prompt".
  • sTitle - The title of the dialog, which is displayed in the upper left hand corner. Strings longer than 30 characters are truncated and "..." is appended.
  • sDetails - The details of the dialog, typically used to give some kind of informative/instructive message to the user. Valid HTML is acceptable.

myDialog.setDialog('error','Input Error','This is the text that appears in the body ' +
		'of the dialog');

myDialog.setDialog('info','','This is the body of the dialog.<br /><br />Some more text...');

• PURPOSE - To set the title of the dialog, which is displayed in the upper left hand corner.
• ARGUMENTS - Accepts a single argument as a string which will set the dialog title. If the string passed is longer than 30 characters, the value will be truncated and "..." is appended to the end.
• EXAMPLE

myDialog.setTitle('Hello world!');

myDialog.setTitle(''); // clear the title so that nothing displays except the icon

• PURPOSE - To set the type of dialog that is to be shown to the user. This must be set or the dialog will default to an "information" dialog. Possible values are: confirm "info", "confirm", "error", "prompt", and "warning".
• ARGUMENTS - Accepts a single argument as a string which will set the dialog type. The following dialog types can be passed (as strings):
  • "confirm" - will display a confirmation dialog with "Yes" and "No" buttons.
  • "error" - will display an error dialog, with an "Okay" button.
  • "info" - will display an information dialog, with an "Okay" button.
  • "warning" - will display a warning dialog, with "Okay" and "Cancel" buttons.
  • "prompt" - will display a prompt dialog, which accepts user input and has "Okay" and "Cancel" buttons.
• EXAMPLE

myDialog.setType('info');	// set myDialog to be a "information" dialog

myDialog.setType('Confirm');	// set myDialog to be a "confirmation" dialog

myDialog.setType('WARNING');	// set myDialog to be a "warning" dialog

• PURPOSE - To start SuperDialog. This function should be called LAST, after setting up other SuperDialog properties.
• EXAMPLE

// We've set all our SuperDialog properties, now display the dialog...
myDialog.start();