Mahmoud Al-HabashOpen to new projects
  • WorkWork
  • ServicesServices
  • LabLab
  • WritingWriting
  • ContactContact
Amman--:--عربي
Writing/Laravel

Livewire Teleport for Modals

Use @teleport to render modals outside component hierarchy.

16 January 20261 min readLaravelاقرأ بالعربية

On this page

  1. Basic Teleport
  2. With Condition
  3. Target Element

Teleport modals:

Basic Teleport

blade
@teleport('body')
    <div class="modal" wire:key="modal">
        Modal content
    </div>
@endteleport

With Condition

blade
@if($showModal)
    @teleport('body')
        <div class="modal-overlay">
            <div class="modal">
                Modal content
                <button wire:click="$set('showModal', false)">Close</button>
            </div>
        </div>
    @endteleport
@endif

Target Element

@teleport('#modal-container')
    <!-- Content -->
@endteleport
All articles

Keep reading

  • Laravel Action Classes Pattern16 January 20261 min read
  • Laravel Action Classes: Single Responsibility16 January 20261 min read
  • Laravel API Rate Limiting16 January 20261 min read