// // Requires jquery at a minimum. // function Dialog() { } Dialog.prototype.constructor = Dialog; Dialog.prototype.currentId = null; //Currently displayed dialog division ID.// Dialog.prototype.currentReset = null; //Called after the dialog is closed to reset the dialog for the next opening.// Dialog.prototype.postCloseHandler = null; //Called after the dialog is closed to perform any post close operation.// Dialog.prototype.topOffset = 40; //Number of pixels of padding between the dialog top and the window top.// // // Shows the dialog with the given dialogId (the ID of the hidden div containing the dialog content). // @param dialogId The identifier of the dialog. // @param reset The optional function called when the dialog is closed (for cleanup). // Dialog.prototype.open = function(dialogId, reset) { //Ensure the dialog isn't already open. Note: We are not currently counting the calls to open it as this is not expected to be a needed feature. This is more of a precaution.// if(this.currentId != dialogId && dialogId) { //If a dialog is already showing then hide it without altering the dialog background, otherwise create the dialog background.// if(this.currentId) { try { var oldDialog = $('#' + this.currentId); oldDialog.parent().children('.dialogClose').remove(); oldDialog.unwrap(); oldDialog.hide(); //Call the reset if available.// if(this.currentReset) { this.currentReset(); } } catch(err) { alert(err); } } else { //Create the background div and display it.// $('body').prepend("
"); } //Create wrapper divs around the dialog div to display a close box and provide some padding and give it a background.// var dialog = $('#' + dialogId); dialog.wrap(""); dialog.parent().prepend(""); dialog.parent().prepend(""); dialog.parent().prepend(""); dialog.parent().prepend(""); dialog.parent().prepend(""); dialog.wrap(""); // style='background: " + dialog.css('background') + ";' //This would take the background from the parent, but this works differently on different browsers (firefox returns nothing if nothing is set, chrome returns a clear background - which overrides the default css settings in dialog.css). dialog.parent().prepend(""); //Show the dialog.// dialog.show(); //Store a reference to the currently displayed dialog & reset function for later use.// this.currentId = dialogId; this.currentReset = reset; //Initialize the resize handler and call it.// $(window).resize(this.resize).resize(); } }; // // Closes the currently open dialog. // Dialog.prototype.close = function() { //Ensure a dialog is open.// if(this.currentId) { try { var dialog = $('#' + this.currentId); //Remove the wrappering divs from the dialog.// dialog.parent().children('.dialogClose').remove(); dialog.unwrap(); dialog.parent().children('.dialogShadowTopRight').remove(); dialog.parent().children('.dialogShadowRight').remove(); dialog.parent().children('.dialogShadowBottomRight').remove(); dialog.parent().children('.dialogShadowBottom').remove(); dialog.parent().children('.dialogShadowBottomLeft').remove(); dialog.unwrap(); //Hide the dialog.// dialog.hide(); //Delete the background div.// $('#dialogBackground').remove(); //Remove the resize handler.// $(window).unbind('resize', this.resize); //Call the reset if available.// if(this.currentReset) { try { this.currentReset(); } catch(err) { alert(err); } this.currentReset = null; } //Call the post close handler if available.// if(this.postCloseHandler) { try { this.postCloseHandler(); } catch(err) { alert(err); } this.postCloseHandler = null; } //Cleanup the dialog references.// this.currentId = null; this.currentReset = null; } catch(err) { alert(err); } } }; // // Closes the currently open dialog. // Dialog.prototype.resize = function() { if(dialog.currentId) { var windowHeight = 0; var windowWidth = 0; var dialogContent = $('#' + dialog.currentId); var dialogWindow = dialogContent.parent().parent(); var background = $('#dialogBackground'); if(navigator.appName.indexOf("Microsoft") != -1) { var htmlHeight = document.body.parentNode.clientHeight; windowHeight = htmlHeight < window.screen.height ? htmlHeight : window.screen.height; windowWidth = document.body.offsetWidth; } else { windowHeight = window.innerHeight; windowWidth = window.innerWidth; } var dialogHeight = dialogContent.height() + 62; //10 for the shadow, 20 for the insets, 1 for the border (x2).// var dialogWidth = dialogContent.width() + 62; background.css({'top': 0, 'left': 0, 'bottom': windowHeight, 'right': windowWidth, 'height': windowHeight, 'width': windowWidth}); dialogWindow.css( { 'top': (dialogHeight > windowHeight ? "0px" : dialogHeight + (dialog.topOffset * 2) < windowHeight ? dialog.topOffset + 'px' : Math.round((windowHeight - dialogHeight) / 2) + "px"), 'left': (dialogWidth > windowWidth ? "0px" : Math.round((windowWidth - dialogWidth) / 2) + "px"), 'height': dialogHeight + 'px', 'width': dialogWidth + 'px' } ); } }; var dialog = new Dialog();