[Backend] Modal active state

An option to toggle the actual active state of a modal inside the backend (.blockclass.active`).

Currently, it’s not possible to work properly with transitions, which gets toggled/triggered from the class I mentioned above - unless I miss something.
Virtual classes are being added to the modal content container, as it should be the case, so there is no access to the parent container.

Maybe there is a universal solution planned to have a better control about these component blocks.

Hope that makes sense.

4 Likes

Here is a working method for anyone who is interested in this.
It’s not the most convenient one but not bad either, so I thought it was still worth sharing.

When a modal is opened, a class of active is added to the parent container .cc-mdl.
So that’s the class we want to build with Relative Styling to target our modal content block:

Now, to simulate the active modal state in the backend, it’s necessary to add these two classes to the modal block via virtual classes:

This will trigger all Relative Styles you applied to your blocks.

It is important to know that it’s required to disable the cc-mdl & active classes before saving the page.
Otherwise, the modal won’t work correctly on frontend.

In the backend, the virtual classes are added to the modal content container, not the parent modal container. This is by design and correct behaviour.
We still benefit from the “Descendant” Combinator via Relative Styling.
This comes with the (small) limitation that you can’t target the modal content container in the backend with this exact method.
Blocks inside the modal content container work without any further limitations.

For these reasons, a toggle to only simulate this functionality exclusively in the backend would be neat.

3 Likes