Trongate Website Homepage

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:

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:

Modal Options

When using a JSON object, you can configure the modal with the following options:

Additional Features and Related Attributes

Enhance your dynamic modals with additional attributes:

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

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.