Building Dynamic Modals
The mx-build-modal
attribute in Trongate MX allows you to dynamically create and populate modal dialogs with content fetched via AJAX. This feature enables the creation of interactive, on-demand modal experiences without the need for pre-defined modal structures in your HTML.
Syntax
<element mx-build-modal="modalOptions">
The modalOptions
can be a string (modal ID) or a JSON object with detailed configuration options.
Basic Usage
Here's a simple example of using mx-build-modal
with a string:
<button mx-get="api/get_user_info" mx-build-modal="user-info-modal">
View User Info
</button>
In this example:
- Clicking the button triggers the creation of a modal with ID "user-info-modal".
- The modal uses default settings for width and does not include a close button.
- Content is fetched from the specified endpoint and inserted into the modal body.
Advanced Usage
For more control over the modal, you can use a JSON object to specify options:
<button mx-get="title_boss/attempt_add_new_title"
mx-build-modal='{
"id": "add-element-modal",
"width": "460px",
"showCloseButton": "true"
}'>
<i class="fa fa-plus-circle"></i> Attempt Add New Title
</button>
In this advanced example:
- Clicking the button creates a modal with ID "add-element-modal".
- The modal has a custom width of 460 pixels.
- A close button is included for user convenience.
- Content is fetched from the "title_boss/attempt_add_new_title" endpoint.
Modal Options
When using a JSON object, you can configure the modal with the following options:
- id (required): The ID for the modal element, used for unique identification in the DOM.
- width (optional): Modal width in pixels or other CSS units.
- showCloseButton (optional): Set to "true" to display a close button; omit or set to "false" to hide it.
- modalHeading (optional): HTML content for the modal heading.
Additional Features and Related Attributes
Enhance your dynamic modals with additional attributes:
- mx-close-on-success: Automatically close the modal on successful AJAX requests.
- mx-close-on-error: Automatically close the modal on failed AJAX requests.
- mx-animate-success: Trigger a success animation on successful AJAX requests.
- mx-animate-error: Trigger an error animation on failed AJAX requests.
Example combining multiple attributes:
<button mx-get="title_boss/attempt_add_new_title"
mx-build-modal='{
"id": "add-element-modal",
"width": "460px",
"showCloseButton": "true"
}'
mx-close-on-success="true"
mx-animate-success="true">
<i class="fa fa-plus-circle"></i> Attempt Add New Title
</button>
Additional Notes
- The modal's appearance is controlled by your application's CSS. Customize as needed.
- The content fetched by the AJAX request will be inserted into the modal body.
- You can use
mx-target
in combination withmx-build-modal
to specify where the fetched content should be placed within the modal. - For handling successful or failed requests, consider using
mx-on-success
ormx-on-error
attributes.
By utilizing the mx-build-modal
attribute along with other Trongate MX features, you can create dynamic and engaging modal experiences with minimal coding effort.