Notes:

1. Click "demo" links below (or image above) to see dragable DHTML dialog box.
2. demo 'jt_AppAlert()' Dialog
3. demo 'jt_AppConfirm()' Dialog
4. demo 'jt_AppPrompt()' Dialog
5. Links on page are disabled by a "veil" when dialog box is present.

DHTML Modal Dialog Box Widget - Object Oriented JavaScript Inheritance Methods

by Joseph Oster, wingo.com, April 2005
Updated Aug 2007 - 'jt_BodyZ', 'jt_Veil', 'setUrl()'

These dialog box "widgets" demonstrate Object Oriented Inheritance features of JavaScript, showing how additional dialogs can be created for specific application requirements while sharing common features provided by a "parent" or base class, in this case 'jt_DialogBox'.

jt_DialogBox API: (demo)

• jt_DialogBox.js is a "base class" that creates a dragable DHTML dialog box with title bar. It provides methods to show, hide, move, set width, etc., and optionally implements a "veil" technique to prevent access to the underlying page, effectively acting "modal".

jt_DialogBox = function(isModal) {
	// CONSTRUCTOR for 'jt_DialogBox' object

jt_DialogBox.imagePath = "../images/"; // set by application; directory path to 'window_close.gif' in titleBar

jt_DialogBox.prototype.show = function() {
jt_DialogBox.prototype.hide = function(ok) {
jt_DialogBox.prototype.moveTo = function(x, y) { // '-1,-1' centers dialog in window
jt_DialogBox.prototype.setTitle = function(title) {
jt_DialogBox.prototype.setUrl = function(url, height) { // creates one IFRAME above 'setContent()' area as needed, updates 'url'
jt_DialogBox.prototype.setContent = function(htmlContent) {
jt_DialogBox.prototype.setWidth = function(width) {
jt_DialogBox.prototype.setCallOK = function(callOK) {
jt_DialogBox.prototype.setCallCancel = function(callCancel) {
jt_DialogBox.prototype.getContentNode = function() {

jt_AppDialogs: (extends jt_DialogBox)

• jt_AppDialogs.js extends jt_DialogBox.js with three specific types of dialog boxes, based on JavaScript equivalents: 'jt_AppAlert', 'jt_AppConfirm' and 'jt_AppPrompt'.

jt_AppAlert API: (inherits from jt_DialogBox - demo 'jt_AppAlert()' Dialog via 'MyAppAlertXY()')

jt_AppAlert = function(icon) {
	// CONSTRUCTOR for 'jt_AppAlert' object - EXTENDS 'jt_DialogBox'

jt_AppAlert.Warning = "icons/warning.gif"; // 'icon' param to 'jt_AppAlert' constructor
jt_AppAlert.Error = "icons/error.gif"; // 'icon' param to 'jt_AppAlert' constructor
jt_AppAlert.Info = "icons/info.gif"; // 'icon' param to 'jt_AppAlert' constructor
jt_AppAlert.lblOK = "OK"; // label for "OK" button (for i18N)
jt_AppAlert.lblCancel = "Cancel"; // label for "Cancel" button (for i18N)

jt_AppAlert.prototype.setContent = function(htmlContent) {
jt_AppAlert.prototype.setIcon = function(icon) {

jt_AppConfirm API: (inherits from jt_AppAlert - demo 'jt_AppConfirm()' Dialog)

jt_AppConfirm = function(icon, callOK, callCancel) {
	// CONSTRUCTOR for 'jt_AppConfirm' object - EXTENDS 'jt_AppAlert'

jt_AppConfirm.prototype.askUser = function(htmlContent) {

jt_AppPrompt API: (inherits from jt_AppConfirm - demo 'jt_AppPrompt()' Dialog)

jt_AppPrompt = function(icon, callOK, callCancel, cssClass) {
	// CONSTRUCTOR for 'jt_AppPrompt' object - EXTENDS 'jt_AppConfirm'

jt_AppPrompt.prototype.askUser = function(htmlContent, stDefault) {
jt_AppPrompt.prototype.focus = function() {
jt_AppPrompt.prototype.hide = function(ok) {

jt_DialogBox.css:

• jt_DialogBox.css

/***** jtDialogBox - BEGIN REQUIRED *********************************/
DIV.jtDialogBox {
	position: absolute;
	display: none;
	}
DIV.jtDialogBox .tbLeft {
	background: url(dialogTL.gif) no-repeat left top;
	width: 10px;
	}
DIV.jtDialogBox .tbRight {
	background: url(dialogTR.gif) no-repeat right top;
	width: 16px;
	padding: 08px 4px 3px 0px;
	vertical-align: bottom;
	}
DIV.jtDialogBox .Title {
	background: url(dialogTM.gif) top;
	background-color: #a9a9a9;
	font-size: 10pt;
	font-weight: bold;
	white-space: nowrap;
	color: #000000;
	padding: 4px 0px 2px 0px;
	cursor:move;
	}
/***** jtDialogBox - END REQUIRED *********************************/


/***** jtDialogBox - BEGIN SUGGESTED *********************************/
DIV.jtDialogBox {
	border-top   : 1px solid #EDEDED;
	border-right : 1px solid #ABABAB;
	border-bottom: 1px solid #ABABAB;
	border-left  : 1px solid #EDEDED;
	}
DIV.jtDialogBox .MainPanel {
	background-color: #ffffff;
	border-top   : 1px solid #898989;
	border-right : 1px solid #4E4E4E;
	border-bottom: 1px solid #4E4E4E;
	border-left  : 1px solid #898989;
	}
DIV.jtDialogBox .MainPanel .ContentArea {
	margin: 16px;
	font-size: 9pt;
	}
/***** jtDialogBox - END SUGGESTED *********************************/

MyApp_dialogs - Common Usage: (extends jt_AppDialogs)

In practice, 'MyApp_dialogs.js' makes it easier to use 'jt_AppAlert()'. Calling 'MyAppAlert(msg)' handles other details automatically, such as initializing the 'alertDialog' instance and calling 'alertDialog.moveTo()' _AFTER_ 'alertDialog.show()' for correct position of dialog box (esp. using '-1,-1' to center a dialog box in a window).
(NOTE: Aug 2007 - I know, much better ways than this!)

function MyAppAlertSetXY(x, y) { // optional, call prior to 'MyAppAlert()'
function MyAppAlert(msg, title, icon) { // 'title' and 'icon' are optional

Use 'View Source' on this page for more on how this code works.

References:

http://docs.sun.com/source/816-6409-10/obj2.htm
http://www.kevlindev.com/tutorials/javascript/inheritance/
dom-drag.js - thank you Aaron Boodman (was www.youngpup.net)

jt_.js - "JavaScript Toolkit"
'jt_DialogBox' License