Add configurable portal target for Modal root.

[evankford]

Environment Details

• PHP Version: 8.4.17
• **Laravel Version:**12.52.0
• React or Vue Version: Vue 3.5.28
• Inertia.js Version: 2.3.14
• Inertia Modal Version: #.#.# 1.0.0-beta-5

---

Feature Request

What feature would you like to see?

The ability to configure the Vue Teleport target element (defaulting as it does now to "body")

This configuration could be a simple teleportTo config property, defaulting to "body". The type would copy Vue's TeleportProps.to (string | RendererElement | null | undefined) . I think the consideration is whether to place this in the base config or separate between the Modal and SlideOver.

Why is it needed?

It is very useful to be able to select the Teleport target of modals for various reasons, including:

• Layering toasts and other "alerts" on top of modals.
• Working with floating-ui for dependable positioning of floating tooltips/UI elements for elements inside of modals without worriyng about hidden overflow.

Additionally, the current Reka-UI implementation dismisses the modal if you click something that is not indexed AFTER the modal in the dom-tree (See DismissableLayer/utils.js in their library - it uses nodeTree indexes, not z-indexes) I know Pascal is working on a dependency-less implementation at the moment, but I still think this is worth the tiny implementation cost.

Alternatives Considered

Explicitly z-indexing elements does work for the mere positioning issue.
Enabling closeExplicitlysolves the closing issue, but then requires harnessing up all the dismissal behavior again.

@pascalbaljet I am more than happy to generate a PR for this, I just know you're almost done with v2. Would you like me to add a PR against the v2-page branch?