ioLoop Docs

Appearance

Modal Customization ​

The Show Popup Form, Show Information Popup, and Show Confirmation Popup Page Flow blocks accept an optional Customization object. The corresponding Client API functions accept the same object through their mdlOptions parameter.

Use only the properties you need. Omit the object or pass null to use the default modal appearance and behavior.

Example ​

js
const modalOptions = {
	okBtnText: 'Continue',
	cancelBtnText: 'Go Back',
	okBtnClass: 'btn-primary',
	cancelBtnClass: 'btn-secondary'
};

$io.ui.showConfirmModal(
	'Continue?',
	'Confirm that you want to continue.',
	modalOptions
);

Properties ​

PropertyTypeDescription
okBtnTextStringSets the label of the OK button. The default is OK.
cancelBtnTextStringSets the label of the Cancel button. The default is Cancel.
hdrBgColorStringSets the background color of the modal header. Uses the default header background color when omitted.
hdrTxtColorStringSets the text color of the modal header. Uses the default header text color when omitted.
bodyBgColorStringSets the background color of the modal body. Uses the default body background color when omitted.
footerBgColorStringSets the background color of the modal footer. Uses the default footer background color when omitted.
hdrTxtClassStringAdds a space-separated list of CSS classes to the modal header text.
hdrH6BooleanUses an h6 heading for the modal title when true; otherwise, the title uses an h5 heading.
modalClassStringAdds CSS classes to the modal dialog. Use this for sizing, vertical alignment, or your own modal styles.
cancelBtnClassStringAdds CSS classes to the Cancel button.
okBtnClassStringAdds CSS classes to the OK button.
oneBtnBooleanShows only the OK button and hides the Cancel button when true.
noBtnBooleanHides both the OK and Cancel buttons when true.
typeStringSets the presentation type. Supported values are modal, right-sidebar, left-sidebar, and top-sidebar.
sidebarTopNumberSets the gap, in pixels, between the top of the page and a right-sidebar, left-sidebar, or top-sidebar modal.
noBackdropClickQuitBooleanPrevents a sidebar modal from closing when the user clicks outside it when true.
sideBarNoHeaderBooleanHides the header of a sidebar modal when true.
sideBarNoFooterBooleanHides the footer of a sidebar modal when true.

modalClass accepts classes supported by the modal dialog as well as your own CSS classes. For example:

js
{
	modalClass: 'modal-dialog modal-lg modal-dialog-centered'
}

The available classes depend on the CSS included in the project. See the Bootstrap modal documentation for the standard modal sizing and positioning classes.

Set type to right-sidebar, left-sidebar, or top-sidebar to display the content from the corresponding edge of the page.

js
{
	type: 'right-sidebar',
	sidebarTop: 0,
	noBackdropClickQuit: true,
	sideBarNoFooter: true
}

The sidebarTop, noBackdropClickQuit, sideBarNoHeader, and sideBarNoFooter properties apply to sidebar modal types.