The Modal class allows customization through the parameters below. Do note that, modals should only
be created through the ModalManager class instance!
Available Options:
Jump to -
| Option Name | Type | Default | Description |
|---|---|---|---|
Modal Header Options |
|||
header |
object | null |
null |
The header section configuration. See below for all available parameters. |
header.enabled |
boolean | null |
false |
If set to true, the header section will be generated. |
header.title |
string | null |
Modal Title |
The title text for the header section. Have no effect if header.enabled is null or
false, as in this case the header wont be visible.
|
header.titleTag |
string | null |
h2 |
The html tag name for title. |
header.content |
string | null |
null |
If provided the header will use this content instead of generating a simple title. |
header.cssClass |
string | null |
null |
Additional css class to be added to header |
header.inlineStyles |
string | null |
null |
Additional inline css styles for header |
Modal Body Options |
|||
body |
object | null |
null |
The mandatory modal content configuration object. Modal header and footer can be omitted, but body object must be present. See all the body.* parameters below to learn about what it supports. |
body.contentType |
string | null |
html |
The modal content type. Any one of these values are supported:
function, html, iframe, image, ajax, youtube-video, template
|
body.content |
string | null |
null |
Only when content type is html pass the html markup here.
|
body.iframeCode |
string | null |
null |
When content type is iframe pass the iframe code here. The iframe code is checked
using regex for validity.
|
body.functionName |
Function | string | null |
null |
If content type is function, use this property to supply the modal with a JS
function or a valid function name that is available on global content. This is required!
|
body.functionArguments |
any | null |
null |
If body.functionName is the name of the function, then any arguments to be passed
to body.functionName. Can be any thing.
|
body.ajaxParams |
object | null |
null |
If content type is ajax, this is where you pass the ajax related options. The ajax
uses browser fetch() .See detailed parameters below.
|
body.ajaxParams.contentDataType |
string | null |
html |
The response format from the AJAX call. Can only be json or html.
|
body.ajaxParams.url |
string |
Required! if content type is ajax. AJAX url to load. Must be a valid
http URL
|
|
body.ajaxParams.method |
string | null |
get |
The http method for this ajax call. can be any http method. |
body.ajaxParams.header |
object | null |
null |
An plain object containing http headers. For example: {"Content-Type" :
"application/json", "X-Requester" : "LayeredModal" }
|
body.ajaxParams.transformHtml |
Function | string | null |
null |
A transformer method that can further process or transform loaded html content via ajax. This can be a function or global function name. The function must return content as string which is used as modal content. |
body.ajaxParams.transformJson |
Function | string | null |
null |
Similar to body.ajaxParams.transformHtml, but for JSON data. Same rules apply. Required! if content data type is json. |
body.ajaxParams.timeoutMs |
integer | null |
30000 |
Timeout in milliseconds till the ajax operation aborts. Defaults to 30 seconds or 30000 milliseconds. Adjust this timeout based on your requirements or expectations. |
body.ajaxParams.decodeParams |
boolean | null |
null |
if the http method is GET, then removes the encoding from ajax url. While this may be desired from some cases, but for most cases you should keep the url with query params encoded so that the url can remain safe. Just added this for edge cases, where it may be required. |
body.ajaxParams.data |
object | FormData | null |
null |
AJAX request data. Data can be a plain object or FormData. Note that as of now, file upload using FormData is not supported. This data can be used for any HTTP methods. if used for GET, it will turn into query params. |
body.imageParams |
object | null |
null |
Required only content type is image. See options below. |
body.imageParams.url |
string |
|
Required! Image url. |
body.imageParams.alt |
string | null |
null |
Image alt text. |
body.imageParams.title |
string | null |
null |
Image title. |
body.imageParams.cssClass |
string | null |
null |
Additional image css class |
body.imageParams.inlineStyles |
string | null |
null |
Additional css inline styles for the image |
body.imageParams.caption |
string | null |
null |
Caption content to be displayed at the bottom of the image. |
body.imageParams.captionTemplate |
string | null |
null |
If a valid <template> element ID is provided, that template's content is
used as caption content. In this case the usual caption parameter above is ignored.
|
body.imageParams.captionCssClass |
string | null |
null |
Additional css classes to be added to caption element. |
body.imageParams.captionInlineStyles |
string | null |
null |
Additional css inline styles to be added to caption element. |
body.cssClass |
string | null |
null |
Additional css classes to be added to modal body. For example no-padding to remove
padding from body. Useful for content types: image, iframe, youtube-video,
etc.
|
body.inlineStyles |
string | null |
null |
Additional css inline styles to be added to modal body. |
body.videoUrl |
string | null |
null |
If content type is youtube-video, pass the video url here. As of now only YouTube
video urls are supported, including shorts.
|
body.templateId |
string | null |
null |
ID of a <template> element. Usable when only when body content type is
template. In this case the template element content becomes the modal body content.
|
Modal Footer Options |
|||
footer |
object | null |
null |
The footer section configuration. See below for all available parameters. All parameter below starting with footer. belongs to footer configuration object. These footer. parameter names follow javascript object key access format. Please DO NOT use the footer. parameters as they are! It wont work. |
footer.enabled |
boolean | null |
false |
If true footer will be generated. |
footer.mode |
string | null |
alert |
Footer has 3 different modes: alert, confirm and custom.
The default is the alert. In alert mode footer only generates a close button
centered inside the footer area. You can configure this close button using
footer.closeButton. parameters. In confirm mode a close button and an ok button is generated
which are spaced around the footer area, making it a confirm dialog. Like the close button
you can configure ok button using footer.okButton. parameters. In custom mode you are
responsible to provide the content for the footer section.
|
footer.content |
string | null |
null |
When footer.mode is set to custom, this parameter is where you set
your custom footer content.
|
footer.onOk |
Function | null |
null |
Footer ok button click event callback. This only applies if footer mode is set to
confirm or in your custom content there is an element with
cssClass.modalOk css class. In here you can handle any processing that should
happen when the ok button is clicked. Note that inside onOk callback this refers to the Modal
object. So, you can make use of it to access modal DOM elements, and hiding the modal when done.
|
footer.cssClass |
string | null |
null |
Additional css classes to be passed to footer element. |
footer.inlineStyles |
string | null |
null |
Additional inline css styles to be passed to footer element. |
footer.okButton |
object | null |
null |
The Ok button configuration. All footer.okButton.* params belongs to this object.
|
footer.okButton.text |
string | null |
Ok |
Ok button text. |
footer.okButton.cssClass |
string | null |
null |
Additional css class for OK button. If you want to use your own button style matching your theme this is the right place for you. |
footer.okButton.inlineStyles |
string | null |
null |
Pass on inline css styles to the Ok button |
footer.okButton.iconClass |
string | null |
null |
Use a font icon class. For example any font-awesome icon class. |
footer.okButton.iconPosition |
string | null |
left |
Place the icon on left or right. |
footer.closeButton |
object | null |
null |
The Close button configuration. All footer.closeButton.* params belongs to this
object.
|
footer.closeButton.text |
string | null |
Close |
Close button text. |
footer.closeButton.cssClass |
string | null |
null |
Additional css class for close button. If you want to use your own button style matching your theme this is the right place for you. |
footer.closeButton.inlineStyles |
string | null |
null |
Pass on inline css styles to the Close button |
footer.closeButton.iconClass |
string | null |
null |
Use a font icon class. For example any font-awesome icon class. |
footer.closeButton.iconPosition |
string | null |
null |
Place the icon on left or right. Default is left. |
Modal Width Options |
|||
autoWidth |
boolean | null |
true |
Should the modal be as wide as the content? |
width |
object | null |
null |
The width object, If a width.value > 0 is provied, the autoWidth is
set to false.
|
width.value |
number | null |
null |
The width value. If not provided or value is <= 0, then autoWidth is set to true. |
width.unit |
string | null |
px |
The width unit. Any valid css unit is allowed. |
maxWidth |
object | null |
null |
The maximum width object. Defaults to {value : 90, unit : 'vw'} |
maxWidth.value |
number | null |
90 |
The maximum width value |
maxWidth.unit |
string | null |
vw |
The maximum width unit. Can be any valid css unit. |
minWidth |
object | null |
null |
The minimum width object. If not provided defaults to 0 |
minWidth.value |
number | null |
0 |
The minimum width value |
minWidth.unit |
string | null |
null |
The minimum width unit. |
Modal Height Options |
|||
autoHeight |
boolean | null |
true |
Should the modal be as high as the content? |
height |
object | null |
null |
The height object, A valid unit value of >= 0 will set autoHeight to false. |
height.value |
number | null |
null |
The height value |
height.unit |
string | null |
px |
The height unit. Any valid css unit supported. |
maxHeight |
object | null |
null |
The maximum height object. Defaults to {value : 90, unit : 'vh'} |
maxHeight.value |
number | null |
90 |
The maximum height value |
maxHeight.unit |
string | null |
vh |
The maximum height unit. |
minHeight |
object | null |
null |
The minimum height object. |
minHeight.value |
number | null |
0 |
The minimum height value |
minHeight.unit |
string | null |
null |
The minimum height unit. |
Modal Css Classes |
|||
cssClass |
object | null |
null |
An object that accepts additional css classes for modal dialog, ok and close buttons. This object combines the class names from modal manager's cssClass parameter objects. So in modal manager's cssClass object you can specify all css classes common for all modals, then in each modal you can assign unique classes to alter look and feel for each modal. |
cssClass.modal |
string | null |
null |
Additional css class names for modal dialog element |
cssClass.modalOk |
string | null |
null |
Additional css class names for modal ok button in footer. Applicable only when
footer.mode is confirm or custom, where an ok button can
be present.
|
cssClass.modalClose |
string | null |
null |
Additional css class names for modal close button in footer. Applicable in any footer mode. |
Callback Functions |
|||
onShow |
Function | string | null |
null |
A callback function or valid global function name called when modal is added to be DOM. This is perfect place if you need to bind events to modal content elements or transform them. |
onHide |
Function | string | null |
null |
A callback function or global function name which is called after modal removed from DOM. Its is where you can cleanup any resources that pertains to this modal instance. |
Modal xButton Options |
|||
xButton |
object | null |
null |
The close or X button settings for this modal instance. the modal manager's xButton parameter object defines common X button content and styling. And, this xButton object affects this modal's X button only. |
xButton.enabled |
boolean | null |
true |
Enable the close button or X button |
xButton.content |
string | null |
null |
The button content. Defaults to X character. But you can provide any content you like, including text, image and font icons. |
xButton.cssClass |
string | null |
null |
Additional css classes for the button |
xButton.cssClass |
string | null |
null |
Additional css classes for the button |
xButton.inlineStyles |
string | null |
null |
Additional css inline styles for the button |
Modal BackDrop Options |
|||
backDrop |
object | null |
null |
Modal back drop. This element is a fixed positioned div element, that covers entire visible viewport. And, this also acts as the parent container of the modal dialog. |
bgColor |
string | null |
rgba(0,0,0,0.5) |
A color that can have alpha transparency. like the rgba format. This acts as back drop's background color. |
opacity |
number | null |
1 |
The backdrop opacity. Do note that, having opacity less than 1, will turn entire backdrop including the modal dialog with transparent! So use this carefully. |
Other Options |
|||
id |
string | null |
null |
An unique ID used assigned to the modal. This id is used to generate various UI component ids, like the modal overlay, modal dialog itself, etc. If empty or not provided, an unique identifier in uuid v4 format (xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx) is generated. |
delayInMilliSeconds |
integer | null |
0 |
By specifying a delay in milliseconds you can make the modal delay it's display and after display actions, like event bindings. You can use this in scenarios, where you need to display a popup N seconds after page loads. |
position |
string | null |
middle-center |
Determines the modal dialog's position in the screen. Can be one of these values -
top-left, top-center, top-right, middle-left, middle-center, middle-right, bottom-left, bottom-center, bottom-right
|
transitionDuration |
number | null |
null |
The duration in milliseconds for the fade in/out animation to complete. You can pass in 0 to disable the fading animation. This can also be configured for each individual modal instance. |
closeOnOutsideMouseClick |
boolean | null |
false |
Determines whether the modal is closed if you click anywhere outside of the modal dialog. |
draggable |
boolean | null |
false |
Determines whether or not modal is draggable. Note: currently drag feature is in beta, you can always just turn this off and use other library for dragging support. |
dragHandle |
string | null |
null |
The element to be used as drag handle. If not provided or empty, the modal header will become the drag handle. If header is not available, then entire modal becomes drag handle. If a value is provided, it will be treated as an element id. If the element is found it will be used as drag handle. Else, the modal itself becomes drag handle, that is you can click and drag anywhere on the modal dialog. Dragging is an experimental feature! |
userSelect |
boolean | null |
false |
Enables user to select text content on the modal. By default it is disabled, so user's cannot select select text on the modal. Make sure to set this to true if you need to allow user's copy content from inside the modal. |
disableEscKey |
boolean | null |
false |
Disable modal closing on keyboard Esc key press |