Modal Dialogs with Livewire v4 Teleport

Teleport renders content outside the component DOM.

Modal Component

Open

@teleport('body')
    @if($show)
        

            

                
Modal Title
                
Modal content goes here...
                Close
            
        
    @endif
@endteleport

Component Class

class ModalDialog extends Component
{
    public bool $show = false;
    
    public function openModal(): void
    {
        $this->show = true;
    }
    
    public function closeModal(): void
    {
        $this->show = false;
    }
}