Modal

A modal is an element that overlays the page, shows a message or other content and provides buttons to let the user make a decision. A dialog box would be another name for it. The modal content can be freely defined. The modal element is defined as an HTML element with the modal CSS class which applies basic modal styles and makes the element invisible at first.

To open a modal element, call the modal jQuery extension function on the element to show as modal. The function takes the options as its single argument. The options are optional and can alternatively be specified as data-opt HTML attributes with the modal HTML element. The following options are supported:

Option	Type	Description	Default
`cancellable`	Boolean	Indicates whether the modal is closed when clicking anywhere outside of it or pressing `Esc`. This also shows a close button in the model overlay.	true
`closeTooltip`	String	The tooltip text for the close button.
`dimBackground`	Boolean	Indicates whether the page background is dimmed while the modal is open.	true

To open a modal, use code like this:

$("#button1").click(function (event) { $("#modal1").modal(options); });

Here are a number of buttons that open the same modal with different options.

Result: Not yet opened

The modal can be closed by code. This is done through a plugin extension function with a syntax similar to other jQuery functions.

$("#modal1").modal.close();

Standard message boxes

A convenient function to show standard message box modals exists. It accepts the content (either as plain text, HTML markup or a jQuery object), the buttons and a result handler that is called when the message box is closed.

$.modal({ text: "Message box content", buttons: [ { text: "Yes", icon: "fas fa-check", className: "default", result: "yes" }, { icon: "fas fa-cross", className: "narrow", result: "no" }, { text: "Cancel", className: "transparent", result: false } ], resultHandler: function (result) { // ... });

The message text can be specified in the text, html or content properties of the specified options.

Each button entry can contain the properties text (button text), icon (<i> element CSS class), className (button’s CSS class) and result. Instead of an array, buttons can also be a string that easily defines standard buttons: "OK", "OK cancel", "YES no", "yes NO". The first button with the default CSS class is focused initially.

The resultHandler function is called when the modal is closed. If a button was pressed, its result value is passed to the function; otherwise nothing.

Besides that, the options are passed on to the modal plugin call so that the modal itself can be configured as well in the same options object. The second example below makes the modal non-cancellable.

This space is intentionally left blank to demonstrate the page scroll lock while a modal is open.