Modal

Modal Structure

Each modal is defined using the attribute b-modal-target with a unique value.

Example: b-modal-target = pricing

The value acts as the modal identifier and must match the trigger that opens it.

When a modal opens, the script applies the following classes to the modal target: is-open on-enter

These classes control visibility and the entry transition.

‍

Trigger Elements

Any element can open a modal by adding the attribute b-modal-open with the same value used on the modal target.

Example: b-modal-open = pricing

When clicked, the trigger finds the modal with the matching identifier and activates it.

Triggers can be placed anywhere on the page.

‍

Closing a Modal

Any element inside a modal can close it by adding the class modal-close.

When clicked, the script finds the closest parent modal container with the attribute b-modal-target and begins the exit transition.

‍

Modal State Classes

The modal system uses three classes to control modal behavior and transitions.

• is-open Applied when the modal becomes visible. This class typically controls layout or display properties.
• on-enter Added immediately after is-open to trigger the entry transition.
• on-exit Added when the modal begins closing. The modal transitions from its entered state to the exit state.

After the exit transition finishes, all three classes are removed automatically.

‍

CSS Transition Logic

Transitions are controlled entirely through CSS.

Typical setup:

• modal-navigation
  Modal hidden or positioned off-screen. This is the base state.
• is-open
  Modal becomes visible and defines the initial state before the enter transition is applied.
• is-open on-enter
  Defines the entered visual state.
• is-open on-enter on-exit
  Defines the exit transition state.

When closing, the script adds the on-exit class while keeping the on-enter class applied so the transition starts from the exact position where the entry animation finished.

‍

Animation Example

A common pattern for modal navigation panels is:

• ‍Entry transition: opacity from 0% to 100%
• ‍Exit transition: opacity from 100% to 0%

Other transitions can also be used if desired.

Because transitions are handled by CSS classes, interaction setup is neither required nor encouraged.

‍

Multiple Modals

The system supports multiple modals on the same page.

Triggers open only the modal that matches their identifier.

If multiple modals are open, the most recently opened modal is considered the active layer.

‍

Nested Modal Rule

A trigger can exist inside an open modal and open another modal.

Nested modals are supported, which means a modal target can be placed inside another modal target when needed.

When a close element is clicked, the script closes only the closest parent modal with the attribute b-modal-target, allowing parent and child modals to function independently.

This makes it possible to stack multiple modals inside each other, as long as their structure and z-index order are set correctly.

Important:

• Each close element should be placed inside the modal it is intended to close.
• Each nested modal should be layered above the previous one through proper z-index structure.

‍

Body Scroll Lock

When a modal opens, page scrolling is disabled.

The scroll position of the page is preserved, and scrolling inside the modal remains functional.

When the last modal closes, page scrolling is automatically restored.

‍

Summary

To create a modal:

1. Add a modal container with the attribute b-modal-target = modal-name.
2. Add a trigger element with the attribute b-modal-open = modal-name.
3. Add a close element inside the modal with the class modal-close.
4. Define CSS transitions using the classes is-open, on-enter, and on-exit.

No additional configuration or interactions are required.