Ajax Modal

A modal available site-wide for AJAX content.

This feature allows to to create a button or link that opens a modal and loads HTML content into the modal from a remote URL.

Site Modal

This feature relies on hidden modal with the id site-model which is included on every CS3 page. The code is found on both the Public and Admin layouts.

Example

When you set the data-bs-target of a modal trigger to #site-modal, then you are indicating you want to use the site wide modal, which enables remote content loading via AJAX. The data-load attribute specifies the URL to pull the body content from, it is expected to be in HTML format. You should also include the data-title to set the text for the title of the modal.

AJAX WARNING!
Please note, Github pages doesn't allow AJAX (or fetch), so the examples on this page don't work properly on the public documentation website. They work fine when running the local development server.

<button data-bs-toggle="modal" data-bs-target="#site-modal" data-load="/ajax/alert_success" data-title="New Shopping List" data-footer="hide" class="btn btn-primary ">
  New Shopping List
</button>

Attributes

The Site Modal inherits all the abilities of a standard modal, and is extended with the following options.

Attribute	Validation	Description
`data-bs-toggle`	Required	Set to `modal` to enable the modal to trigger when the element is clicked on.
`data-bs-target`	Required	Set to `#site-modal` to use the modal included on all CS3 pages.
`data-title`	Required	The value of this attribute will be used as the text in the title of the modal.
`data-load`	Required	Specifies the URL of the content you want AJAX’d into the modal body. The AJAX request should return HTML formatted content to display inside the modal.
`data-footer`	Optional	Present and given the value `hide`, it will hide the footer in the modal. Omitting this attribute will include the modal footer including a close button.