Modal Options

Modal options allow you to create a link in the calculator that can be clicked to open a popup modal window where you can display additional help details.

Modal Options also include support for CSS and JavaScript. Modal options are very closely aligned to Calculator options but a Modal by definition can only appear as a modal. A Calculator option can appear as a modal or inline with your calculator.

Modal options are an Ultra plan feature.


Setting up a Modal Option #

Modal options appear as an Icon and Link in the Calculator. When clicked, the actual modal window opens. The link name is the value set in Display Name of the Option.

Display Name: Name that appears in Modal link.

Icon (SVG): Optional. Include an SVG image beside the modal Display Name of the Modal Option. Must be an SVG. If your SVG is not properly sized, you may need to adjust the SVG size attributes or you can try some CSS.

/* modal icon size */
.modal-icon svg {
width: 15px;
}

Modal Heading: Appears at the top of the modal window.

Modal Content (HTML): Content to display in the modal window.

Javascript: Include any Javascript required in the Modal.

CSS: Include any CSS required in the Modal.

Example Modal Option #