1132

A special welcome to our newest member, KnoldTot.

Compose Reply

Are modals true modal?

#1
23 Apr 2025, 7:49pm UTC
Wednesday 23rd April 2025, at 7:49pm UTC
Status: Unresolved
Hello Trongate Masters.

I wonder if it is intentional that the mx modals are not true modals? The way the mx modals work for me, is that when clicking outside the modal object - that is, on the overlay - the object closes. Actually the same behavior is in the documentation examples here: https://trongate.io/documentation/display/trongate_mx/ui-enhancements/building-dynamic-modals .

Regards.
Edited on Thursday 24th April 2025, at 1:15pm UTC
#2
24 Apr 2025, 1:23pm UTC
Thursday 24th April 2025, at 1:23pm UTC
Hello KnoldTot,

As per the Trongate MX documentation, modals created using the `mx-build-modal` attribute are designed to close when a user clicks outside the modal content area. This behavior is consistent with the examples provided in the documentation.

This design choice aligns with common user interface patterns, where clicking outside a modal dismisses it, providing a quick way to exit the modal without interacting with specific close buttons.

However, that same behavior is precisely why some may consider these “not true modals.”

• True modals enforce strict focus: users cannot interact with background content and must explicitly dismiss the dialog (for example, by clicking a close button or pressing Escape).

• Trongate MX modals, by contrast, can be dismissed simply by clicking on the overlay - behaving more like pop-ups in certain UI libraries.

Notably, recent Git commits to the Trongate framework have refined modal behavior:

• December 11, 2024: ensured that clicks outside the space defined by an open modal will only close the modals defined by Trongate MX itself.

• Subsequent update: modals now respond to the Escape key and overlay clicks even without including `admin.js` or `app.js`.

Currently, there is no built-in flag to disable overlay-click dismissal. If you require “true modal” behavior - i.e. prevent any click outside the content from closing the dialog—you can add custom JavaScript:

This script intercepts clicks on the overlay and stops them from closing the modal.

While the default Trongate MX approach favors quick dismissal via overlay clicks, you have full flexibility to enforce stricter, “true modal” constraints through this additional scripting.

Cheers,
DaFa
Edited on Thursday 24th April 2025, at 1:47pm UTC
#3
24 Apr 2025, 1:40pm UTC
Thursday 24th April 2025, at 1:40pm UTC
Hello DaFa.

OK, I got it. Personally I would prefer that the closing was activated only if nothing was entered in the form.

Regards.
Edited on Wednesday 30th April 2025, at 6:50pm UTC
×