Modal

A Modal will add add dialogs and pop-ups to your site for lightboxes, user notifications, or custom content.

This widget implements the native BootStrap Modal control. In addition to the button rendered by the widget, the Modal area can be triggered via a Shortcode in your content, or by a custom anchor tag.

The Modal Admin Panel

This panel allows you to configure and add content to your Modal widget.

Title

The internal name of the Modal Area. It will be rendered as the text inside the title bar, if selected.

Show Title Bar?

Select this of you want your modal to have a title bar across the top. The title text will appear in the bar.

Render Trigger?

This will render a link or button to trigger showing the modal. You can also choose to supress the trigger link, and build your own with a shortcode or DIY anchor tag (described below).

Button/Link Text

This is the text that will appear in the trigger button or link, if selected.

Modal ID

Allows you to specify the ID of the modal. This makes using the DIY link MUCH easier. No spaces or special characters, please!

Modal Width

You may select the width of the modal. choices are: Small, Default, Large, Extral Large and Full Screen.

Background Color

Specify the color of the modal. Any valid CSS color value is allowed.

Center Vertically

Selecting this will render the modal vertically centered (duh).

Static Backdrop

Normally, if the user clicks anywhere outside the modal it will close. Select this to disable this behavior, and close button will be the only way to close the modal.

Allow Scrolling in Modal

If selected, this will allow a scrollbar to appear in the modal, if the content overflows the available space. Otherwise, the modal will expand down, and the user will scroll the entire page to view the content.

Content List

The add (+) button at the bottom will allow you to add a Container widget

You may rearrange the widgets by using the Drag-and-drop handles on the left of each section
You may delete a widget by selecting its red trashcan icon
You may open a widget for editing by selecting the > button just to the left of its title (Container widgets are discussed on its own page)

Triggering your Modal Area

As stated above, there are three ways to trigger the visibility of an Modal Area: the built in button/link, a ShortCode embedded in your content, or a custom URL you write & put into the HTML editor yourself.

The built-in button & link is discussed in the Admin Panel section above. The other two methods are described below:

Via the [modal] ShortCode

If you are working in an HTML area, you may add a link to trigger an Modal Area with the [modal] shortcode.

The easiest way to embed the shortcode is to click the Insert Shortcode button on the HTML editor's toolbar. It will embed the default code into your document (See the shortcode page for details).

Via a Custom URL

You may also trigger the Modal area using an HTML anchor tag. The data-bs-target and data-bs-toggle attributes of the tag must be set correctly in order to call the BootStrap eventhandler. For Example:

<a href="#" data-bs-toggle="modal" data-bs-target="#yourModalID">yourLinkText</a>

HREF

The href atribute should go nowhere. Set it to "#"

data-bs-toggle

Add the attribute/value of data-bs-toggle="modal" to the anchor tag.

data-bs-target

This needs to be set to the ID of your Modal. Use the Modal ID field to specify your own ID (MUCH easier than tracking down the system generated ID).

yourLinkText

Standard rules apply. yourLinkText will be rendered as the link text.

Back to TOC