مربعات الحوار مع Teleport في Livewire v4

<button wire:click="$set('show', true)">فتح</button>

@teleport('body')
    @if($show)
        <div class="modal-backdrop fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
            <div class="modal bg-white p-6 rounded-lg shadow-xl">
                <h2 class="text-xl font-bold mb-4">عنوان النافذة</h2>
                <p>محتوى النافذة هنا...</p>
                <button wire:click="$set('show', false)" class="mt-4 px-4 py-2 bg-gray-200 rounded">إغلاق</button>
            </div>
        </div>
    @endif
@endteleport

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