การสร้าง Modal Dialog ด้วย Livewire เป็นการเปิดหน้าต่าง Popup ที่ให้ผู้ใช้โต้ตอบ เช่น การยืนยันการลบข้อมูล การกรอกฟอร์ม หรือการแสดงรายละเอียดเพิ่มเติม Modal ช่วยให้สามารถแสดงข้อมูลหรือรับข้อมูลจากผู้ใช้ในรูปแบบที่ไม่ทำให้ผู้ใช้ต้องออกจากหน้าเดิม Livewire ทำให้การสร้าง Modal ทำได้ง่ายโดยใช้การควบคุมการแสดงผลด้วยตัวแปรและฟังก์ชันภายใน Component

ตัวอย่างการสร้าง Modal Dialog ด้วย Livewire

สร้าง Component สำหรับ Modal สมมุติว่าเราต้องการสร้าง Modal ชื่อ DeleteConfirmation เพื่อยืนยันการลบข้อมูล เราสามารถใช้คำสั่งนี้เพื่อสร้าง Component:

php artisan make:livewire DeleteConfirmation

กำหนดตัวแปรและฟังก์ชันใน Component (DeleteConfirmation.php) เปิดไฟล์ DeleteConfirmation.php และกำหนดตัวแปร $isOpen เพื่อควบคุมการแสดงผลของ Modal และสร้างฟังก์ชัน openModal และ closeModal เพื่อเปิดและปิด Modal:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class DeleteConfirmation extends Component
{
    public $isOpen = false;

    public function openModal()
    {
        $this->isOpen = true;
    }

    public function closeModal()
    {
        $this->isOpen = false;
    }

    public function deleteItem()
    {
        // การประมวลผลเมื่อผู้ใช้กดยืนยันลบข้อมูล
        session()->flash('message', 'Item deleted successfully.');

        $this->closeModal();
    }

    public function render()
    {
        return view('livewire.delete-confirmation');
    }
}

• $isOpen ใช้ควบคุมสถานะการแสดงผลของ Modal
• ฟังก์ชัน openModal และ closeModal ใช้สำหรับเปลี่ยนสถานะของ $isOpen
• ฟังก์ชัน deleteItem ใช้สำหรับจัดการการลบข้อมูลและปิด Modal หลังจากลบเสร็จ

สร้าง UI ของ Modal ใน Blade View (delete-confirmation.blade.php) ในไฟล์ delete-confirmation.blade.php ให้สร้างโครงสร้าง HTML ของ Modal โดยใช้ wire:click เพื่อเรียกฟังก์ชัน openModal และ closeModal รวมถึงแสดงข้อความแจ้งเตือนเมื่อ Modal ปิด:

<div>
    @if (session()->has('message'))
        <p>{{ session('message') }}</p>
    @endif

    <!-- ปุ่มเปิด Modal -->
    <button wire:click="openModal">Delete Item</button>

    <!-- Modal Dialog -->
    @if($isOpen)
        <div class="modal">
            <div class="modal-content">
                <h2>Are you sure you want to delete this item?</h2>
                <button wire:click="deleteItem">Yes, Delete</button>
                <button wire:click="closeModal">Cancel</button>
            </div>
        </div>
    @endif
</div>

<!-- Style ของ Modal -->
<style>
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        background: white;
        padding: 20px;
        border-radius: 8px;
        text-align: center;
    }
</style>

• @if($isOpen) ใช้เพื่อแสดง Modal เมื่อ $isOpen เป็น true
• wire:click="deleteItem" ใช้เพื่อเรียกฟังก์ชันลบข้อมูลและปิด Modal
• การกำหนด Style ช่วยทำให้ Modal แสดงผลได้อย่างเหมาะสม

การแสดง Component ใน Blade Template เรียกใช้ Component DeleteConfirmation ในหน้า Blade Template เช่น home.blade.php:

@livewire('delete-confirmation')

ผลลัพธ์ที่ได้ เมื่อผู้ใช้คลิกปุ่ม “Delete Item” ระบบจะแสดง Modal เพื่อยืนยันการลบ หากผู้ใช้กดปุ่ม “Yes, Delete” ระบบจะทำการลบข้อมูลและปิด Modal พร้อมแสดงข้อความยืนยันการลบข้อมูล หากผู้ใช้กด “Cancel” Modal จะปิดลงโดยไม่มีการเปลี่ยนแปลงใด ๆ

การนำไปใช้งาน

การใช้ Modal ใน Livewire สามารถนำไปใช้ในหลายกรณี เช่น:

• การยืนยันการลบข้อมูลที่สำคัญ
• การกรอกข้อมูลหรือการรับข้อมูลเพิ่มเติม เช่น การแก้ไขข้อมูล
• การแสดงรายละเอียดของข้อมูล เช่น รายละเอียดของสินค้าหรือผู้ใช้

Livewire ช่วยให้การควบคุมการแสดงผลของ Modal ทำได้อย่างง่ายดายและสะดวก ลดการเขียน JavaScript ในการควบคุม Modal และทำให้การพัฒนาเป็นไปอย่างรวดเร็ว