This is a simple popup dialog manager based upon jQuery 1.4 and the jQuery UI plugin.
I decided to build this after I realized how useful the jQuery UI dialog mechanism was. The only difference here is that it has been wrapped into a single call for a standard alert box or a locking modal dialog. Either of these dialogs can be used in a managed or instanced mode. In managed mode the dialog with not be destroyed when it is closed. When you call a managed dialog you are returned the div which was created to house the dialog. Instanced dialogs automatically destroy themselves when they are closed. Instanced dialogs also return their div id.
Standard Dialogs and Locking dialogs take two (2) parameters the contents of the dialog and the title of the dialog. The inner can be any HTML that is valid within a div container.
Standard Dialogs have the option to be closed with an OK button while Locking dialogs must be removed programmatically or not at all.
This is a work in progress but there is no reason not to share even this basic module for now. This code is free to use an modify unless you claim it’s yours.
Alert = new function AlertUser(){
/**
* @author Paul Scrrone (NuRelm)
* Public Static class designed to handle popup dialog generation using jquery dialog
* Contains 7 Methods
* @member Alert
*/
var divcount=0;
/**
* creates a dialog box which will not allow
* any background action to be completed. This type of dialog can only be removed
* programaticly
* @param Inner The HTML contents of the dialog window
* @param Title The title of the dialog
*/
this.CreateLockedModalOnDemand = function(Inner, Title){
divcount++;
$('body').append('
')
// Initialize the dialog boxes
$("#lockedondemandKickBackDiv").dialog({
autoOpen: false,
bgiframe: true,
modal: true,
buttons: {},
closeOnEscape: false,
resizable: false,
draggable: false,
open: function(event, ui){$(".ui-dialog-titlebar-close").hide();}
});
return "lockedondemandKickBackDiv-"+divcount;
};
/**
* creates a dialog box that contains a single button OK
* @param Inner The HTML contents of the dialog window
* @param Title The title of the dialog
*/
this.CreateDialogOnDemand = function(Inner, Title){
divcount++;
$('body').append('
')
// Initialize the dialog boxes
$("#ondemandKickBackDiv-"+divcount).dialog({
autoOpen: false,
bgiframe: true,
modal: true,
buttons: {
OK: function() {
$(this).dialog('close');
}
}
});
//$("#ondemandKickBackDiv-"+divcount).dialog('open');
return "ondemandKickBackDiv-"+divcount;
};
/**
* DeleteDialogOnDemand permits the deletion of any ondemand dialog in existence
* @param jqobj this is a jqobj string ie. if it was an id tag reference
* it would contain the leading #
*/
this.DeleteDialogOnDemand = function(jqobj){
$(jqobj).remove();
};
/**
* ResetOnDemandDivs resets the divcount to zero and attempts to remove all created
* dialog divs
*/
this.ResetOnDemandDivs = function(){
for(var i =0; i < divcount; i++){
try{
$("#ondemandKickBackDiv-"+i).remove();
}catch(err){}
}
divcount = 0;
};
/**
* CreatOneTimeUseDialog appends a div with the contents provided by the parameters
* to the bottom of the current document and then opens the dialog once the dialog is
* closed the dialog is destroyed
* @param Inner The HTML contents of the dialog window
* @param Title The title of the dialog
*/
this.CreateOneTimeUseDialog = function(Inner, Title){
var OneTime = this.CreateDialogOnDemand(Inner, Title);
var that = this;
$("#"+OneTime).dialog({
buttons:{
OK: function(){
$(this).dialog('close');
//this was in the wrong scope due to usage in inner jQuery function
//supplanted the outer this by assignment to that
that.DeleteDialogOnDemand("#"+OneTime);
}
},
width:350
});
$("#"+OneTime).dialog('open');
return $("#"+OneTime);
};
/**
* CreateOneTimeUseLockedDialog appends a div with the contents provided by the parameters
* to the bottom of the current document and then opens the dialog once the dialog is
* closed the dialog is destroyed
* @param Inner The HTML contents of the dialog window
* @param Title The title of the dialog
*/
this.CreateOneTimeUseLockedDialog = function(Inner, Title){
var OneTime = this.CreateLockedModalOnDemand(Inner, Title);
var that = this;
$("#"+OneTime).dialog({
autoOpen: false,
bgiframe: true,
modal: true,
buttons: {},
closeOnEscape: false,
resizable: false,
draggable: false,
open: function(event, ui){$(".ui-dialog-titlebar-close").hide();},
width:350
});
$("#"+OneTime).dialog('open');
return $("#"+OneTime);
};
/**
* @deprecated
* @param condition a boolean statement
* @param dialogDivObj a jquery object string that is the dialog to be opened or closed
*/
this.ConditionalAlert = function(condition, dialogDivObj){
if(condition){
$(dialogDiv).dialog('open');
}else{
$(dialogDiv).dialog('close');
}
};
};
To download Click: jq-Alert
Software Engineer and Code Enthusiast. I enjoy British comedies and long walks on the beach when I am not exclaiming, "Nope, you didn't write it general enough", and "For you, Object Oriented Programming was something that happened to other people". On a serious note, I will always remain to be a student of programming. At least until the day I transform into a creature with the middle name Mathison, and the initials AT.