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 Sep 2012

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, dragable) {
	// CONSTRUCTOR for 'jt_DialogBox' object

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.setWidth = function(width) {
jt_DialogBox.prototype.setUrl = function(url, height) { // creates one IFRAME above 'setContent()' area as needed, updates 'url'
jt_DialogBox.prototype.getUrl = function() {
jt_DialogBox.prototype.setContent = function(htmlContent) {
jt_DialogBox.prototype.getContentNode = function() {
jt_DialogBox.prototype.setCallOK = function(callOK) {
jt_DialogBox.prototype.setCallCancel = function(callCancel) {

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 = "warning.gif"; // 'icon' param to 'jt_AppAlert' constructor
jt_AppAlert.Error = "error.gif"; // 'icon' param to 'jt_AppAlert' constructor
jt_AppAlert.Info = "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: 8px 4px 3px 0;
	vertical-align: top;
}
DIV.jtDialogBox .tbRight A {
	display:block;
	width: 12px;
	height: 11px;
	background: url(window_close.gif) no-repeat;
}
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;
}
/***** 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 {
	border-top	 : 1px solid #898989;
	border-right : 1px solid #4E4E4E;
	border-bottom: 1px solid #4E4E4E;
	border-left	: 1px solid #898989;
	background-color: #ffffff;
}
DIV.jtDialogBox .MainPanel .ContentArea {margin: 10px;}
/***** 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)

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