x-teleport Directive

Move an element to another part of the DOM – perfect for modals.

What is x-teleport?

x-teleport moves a piece of HTML to another part of the DOM, usually to avoid CSS overflow issues or to render a modal at the <body> level. It takes a CSS selector as a value, and Alpine will move the template content to that target.

When to Use

Use x-teleport for modals, dropdowns, tooltips, or notifications that need to break out of a parent with overflow: hidden or a low z-index.

Example

Code

<div x-data="{ open: false }">
  <button @click="open = true">Open Modal</button>
  <template x-teleport="body">
    <div x-show="open" @click.self="open = false" class="fixed inset-0 bg-black/50 flex items-center justify-center">
      <div class="bg-white p-6 rounded">
        <p>I'm teleported to body!</p>
        <button @click="open = false">Close</button>
      </div>
    </div>
  </template>
</div>

The target can be any CSS selector. If you want to teleport to a specific container, use its ID: x-teleport="#portal-target". Make sure the target exists in the DOM.

Helpful? Share this page!↑ Back to top