The base module (object)

 EasyDialogBox 

As long as the script-file is included as above then the module will be initialized automatically when page loads, after that all the functions and methods are available.

 

Create dialog

Minimum syntax:
let myObj = EasyDialogBox.create(id, strBoxTypeClass, strTitle, strMessage);

Full syntax:
let myObj = EasyDialogBox.create(id, strBoxTypeClass, strTitle, strMessage, fnCallback, x, y, w, h);

Return value = object, or null if could not be created.

 

Parameters:

id = custom id 'string' , if not used then you must set it to a false, null or 0 (zero)

 

 

strTitle = title text of the box, text only recommended, but can contain HTML.

 

strMessage = HTML content to custom and build as you wish, images, forms, anything you want, or just plain text.

 

Optional parameters:

fnCallback = callback function that executes when box closes (or you can just use myObj.onClose() function instead)

If using full syntax, but not using the fnCallback parameter, then you must set it to a false, null or 0 (zero)

 

x = initial horizontal position of the box. If not used then you can set it to null and it defaults to horizontal center in viewport.

y = initial vertical position of the box. If not used then you can set it to null and it defaults to vertical center in viewport.

w = initial width of the box. If not used then you can set it to null and it defaults to 600px as defined in the css-file.

h = initial height of the box. If not used then you can set it to null and the height is adjusted by content.

Note: Use of x, y, w, h can possibly break the dialogbox "responsiveness".

 

 

Properties of a created object

Name	Type	Description
id	string	dialogbox ID
strTypeClass	string	dialogbox type
strTitle	string	dialogbox heading title
strMessage	string	dialogbox contents (text and HTML)
callback()	method	custom function that fires when dialog is closed (works the same way as onClose/onHide)
x	number	dialogbox horizontal position
y	number	dialogbox vertical position
w	number	dialogbox width
h	number	dialogbox height
strInput	string	returned string value from user input when using dlg-prompt
nRetCode	number	returns the value of the dialog-button the user clicked
bVisible	boolean	variable that indicates if dialog is visible or not
bExistInDOM	boolean	variable that indicates if dialog exist in DOM
bFade	boolean	variable that indicates if dialog should fade. Using dlg-fade sets this to true
nTimeId	number	variable that holds the timeout ID when using timed hiding
show()	method	shows dialog
hide()	method	hides dialog
destroy()	method	destroys dialog
onCreate()	method	fires when dialog is created
onShow()	method	fires when dialog is shown
onHide()	method	fires when dialog is hidden/closed
onClose()	method	fires when dialog is closed
onDestroy()	method	fires when dialog is destroyed
el	element	reference to dialogbox element itself
$()	method	get elements inside dialog
width()	method	set dialogbox width (px)
height()	method	set dialogbox height (px)
xPos()	method	change dialogbox X position (pixels from left)
yPos()	method	change dialogbox Y position (pixels from top)
center()	method	position dialogbox in center of window/viewport
colorBorder()	method	set dialog bordercolor
colorHeading()	method	set dialog heading backgroundcolor
color()	method	shorthand, set both heading and border same color
addButton()	method	add custom button to dialog footer

 

 

 

 

Show dialog

myObj.show();

Return value = the object itself if the box could be shown, false if not.

 

 

Hide dialog (close)

Default use is without any parameters: myObj.hide();, use this if you just want to hide right away without any more fuzz.

Return value = the object itself

(Pressing the keyboard escape-key Esc also fires this function)

Optional parameters:

Else you can use it with paramters like this: myObj.hide(msec); or this myObj.hide(msec, skip); if using both.

msec is a value in milliseconds of type number, to delay the hiding/closing of the dialogbox.
The timeout ID is stored in variable myObj.nTimeId so it can be used with clearTimeout(nTimeId); or some other custom codestuff.

skip is a value of type boolean, to skip execution of the objects .onHide() function. Only skips if value is true boolean, using true, else it executes as normal which is also default.

 

 

Destroy dialog

myObj.destroy();

Return value = true if object was deleted, false if not.

All dialogboxes will be kept in the DOM by default once created, they are only removed from the DOM when the user executes the "destroy" function.
The user is responsible for deleting/destroying the dialogbox objects to prevent DOM-fill and "memory leaks".

Tip: By specifying an ID when creating a box, the existing box are reused when hiding and showing, instead of a new box being created each time the box is hidden and shown, filling up the DOM and leak memory if not destroyed.

It's good practice to destroy a dialogbox when it's not going to be used again and no longer needs to exist in DOM.

The simplest way to do this is in the functions myObj.onClose() or myObj.onHide().

Like this myObj.onClose = myObj.destroy; if nothing else is going on in the "onClose" function.

If you need to do other stuff in that function also, then you can do something like below:

 

 

 

Get the dialogbox HTML element itself

myObj.el;

Return value = HTMLElement

 

 

Get HTML elements inside the dialogbox

There are multiple ways to do this, all which are similar to querySelectorAll()

myObj.$(); using () blank, returns the dialogbox HTML element itself, same as myObj.el;, using querySelector()

myObj.$('#someId'); using # (hash), returns a single HTML element containing the specified ID, using querySelector(), or null if none exist in DOM.

myObj.$('.someClass'); using . (period), returns a NodeList, or null if none exist in DOM.

myObj.$('someElement'); returns a NodeList, or null if none exist in DOM.

You can also mix it up e.g.:

myObj.$('#someID p input.myFormData'); returns a NodeList, or null if none exist in DOM.

myObj.$('#someID p input.myFormData')[0]; returns the first HTML element in a NodeList indexed [0]

NOTE: In all instances you can check against null to see if any elements were found.

 

 

Set dialog width

myObj.width(value);

Where value is a pixel value of type number, e.g. myObj.width(400);
Return value = the object itself

 

 

Set dialog height

myObj.height(value);

Where value is a pixel value of type number, e.g. myObj.height(600);
Return value = the object itself

 

 

Change dialog X position

myObj.xPos(value);

Where value is a pixel value of type number, e.g. myObj.xPos(200);

Return value = the object itself

 

 

Change dialog Y position

myObj.yPos(value);

Where value is a pixel value of type number, e.g. myObj.yPos(300);

Return value = the object itself

 

 

Center dialog in window

myObj.center();

Positions the dialog in horizontal and vertical center of window or viewport.

Return value = the object itself

 

 

Change colors

You can set the colors of the dialogs border and heading for some basic UI-theming without editing the CSS file or other custom CSS stuff.

myObj.color('#990000'); , to set both the heading and border color to same color.

Or you can set them individually like below:

myObj.colorBorder('#990000'); , to set the border color to one color.

myObj.colorHeading('#005599'); , to set the heading backgroundcolor to another color.

Any CSS color value will work.

To remove the custom color and go back to default you can just change the custom color value to an empty string ''

For instance from myObj.colorBorder('#ff0000'); to this myObj.colorBorder(''); , to return color back to default defined in CSS file.

Return value = the object itself

 

 

Add custom button to footer

With this method you can add your own custom buttons to the footer of the dialog.

Syntax: myObj.addButton(strText, fnClick, nPos);

Where strText is of type string, the text that you want to display on the button.

fnClick is of type function, the click-event function for the button. Can either be a reference to a function or a function written inline.

nPos is of type number, and is the index position of where you want to insert the button among the rest of the footer-buttons.
If set to 0 then it's inserted as the first button on the left side, if set to 1 then it's inserted as the second button from the left side, 2 as third button etc.
If omitted/not specified then the button is just appended last on the right side.

Return value = the button HTMLElement itself

 

 

 

Object event-methods

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

 

Examples

 

Simple example

Create a dialog and then show it.

 

 

Example with Yes and No button

 

 

 

Example with multiple dialogboxes

Create three resizable dialogs and then show them, also giving them some color.

Used class flag dlg-multi to make it easier to display multiple boxes at the same time, and dlg-resize to make 2 of the boxes resizable.
Also chaining the object method execution.

 

 

"Toast" example

You can also make "toast" notification boxes by using the flag dlg-toast,
which is really a shorthand for the combined flags: dlg dlg-disable-heading dlg-disable-footer dlg-disable-drag dlg-disable-overlay
Using dlg-fade to make it fade in/out.

This example creates a toast, shows it and hides it after 3 seconds. Also chaining the object methods .show() and .hide().
Since not giving it an ID (just null), I'm choosing to destroy it after hiding to clean up the DOM and memory.
The second null is for the title, the third null for callback function, we don't need to use them here so just set them to null (any false will do)
Also using a null for the X position which means center horizontally, y=20 pixels down vertically, and width=500 pixels, height not set so it adjusts according to content.

 

 

Create a dialogbox with a custom form and submit it

Create dialog box with pre-written HTML

Create dialogboxes with HTML, no need to write any Javascript code unless you need callback() for button clicks etc.

If you just want to display a simple messagebox with some info, then you only have to write HTML.

 

 

HTML examples