บทที่ 48: การสร้าง Modal

1. ความเข้าใจเกี่ยวกับ Modal ใน Alpine.js

Modal เป็นหน้าต่างป็อปอัพที่ปรากฏบนหน้าเว็บเพื่อแสดงข้อมูลเพิ่มเติม, การแจ้งเตือน, หรือฟอร์ม

ใน Alpine.js สามารถสร้าง Modal ได้ง่ายด้วย x-show และ Transition
ใช้ร่วมกับ State เพื่อควบคุมการเปิด/ปิด Modal

2. การสร้าง Modal เบื้องต้น

ตัวอย่าง 1: Modal เปิด/ปิดด้วยปุ่ม

<div x-data="{ isOpen: false }">
    <!-- ปุ่มเปิด Modal -->
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>
 
    <!-- Modal -->
    <div
        x-show="isOpen"
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Modal Title</h2>
            <p class="text-gray-700">This is a simple modal.</p>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>

คำอธิบาย:

x-show="isOpen" ควบคุมการแสดง/ซ่อน Modal
@click.away="isOpen = false" ปิด Modal เมื่อคลิกนอกพื้นที่ Modal
x-transition เพิ่มเอฟเฟกต์การแสดงผล

3. การเพิ่ม Transition ใน Modal

ตัวอย่าง 2: Modal พร้อม Animation

<div x-data="{ isOpen: false }">
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>
 
    <div
        x-show="isOpen"
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-90"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90">
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Animated Modal</h2>
            <p class="text-gray-700">This modal has transitions!</p>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>

คำอธิบาย:

x-transition:enter และ x-transition:leave ใช้เพิ่ม Animation เมื่อ Modal แสดงและซ่อน
การเปลี่ยนแปลงขนาดและความโปร่งใส (scale, opacity) ช่วยเพิ่มความน่าสนใจ

4. การใช้ Slot ใน Modal

ตัวอย่าง 3: Modal พร้อม Slot

<template id="modal-template">
    <div
        x-show="isOpen"
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <slot></slot>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</template>
 
<div x-data="{ isOpen: false }">
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Modal</button>
 
    <div x-init="$el.innerHTML = document.getElementById('modal-template').innerHTML">
        <h2 class="text-lg font-bold mb-4">Custom Content</h2>
        <p class="text-gray-700">This content is passed to the slot.</p>
    </div>
</div>

คำอธิบาย:

ใช้ <slot> เพื่อเพิ่มความยืดหยุ่นในเนื้อหา Modal
Component นี้สามารถใช้ซ้ำและปรับเนื้อหาได้ง่าย

5. การสร้าง Modal แบบ Dynamic

ตัวอย่าง 4: Dynamic Modal พร้อมข้อมูล

<div x-data="{ isOpen: false, modalContent: '' }">
    <button @click="isOpen = true; modalContent = 'Dynamic Modal Content';" class="px-4 py-2 bg-blue-500 text-white rounded">
        Open Modal
    </button>
 
    <div
        x-show="isOpen"
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Dynamic Modal</h2>
            <p class="text-gray-700" x-text="modalContent"></p>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>

คำอธิบาย:

ใช้ State modalContent เพื่อแสดงข้อความที่เปลี่ยนแปลงได้ใน Modal
ปรับเนื้อหา Modal ได้แบบ Dynamic โดยใช้ Event

6. การสร้าง Modal ที่ซับซ้อน

ตัวอย่าง 5: Modal พร้อมฟอร์ม

<div x-data="{ isOpen: false, formData: { name: '', email: '' } }">
    <button @click="isOpen = true" class="px-4 py-2 bg-blue-500 text-white rounded">Open Form Modal</button>
 
    <div
        x-show="isOpen"
        class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50"
        @click.away="isOpen = false"
        x-transition>
        <div class="bg-white p-6 rounded shadow-lg">
            <h2 class="text-lg font-bold mb-4">Form Modal</h2>
            <form @submit.prevent="alert(`Name: ${formData.name}, Email: ${formData.email}`)">
                <label class="block mb-2">
                    Name:
                    <input type="text" x-model="formData.name" class="w-full p-2 border rounded">
                </label>
                <label class="block mb-2">
                    Email:
                    <input type="email" x-model="formData.email" class="w-full p-2 border rounded">
                </label>
                <button type="submit" class="mt-4 px-4 py-2 bg-green-500 text-white rounded">Submit</button>
            </form>
            <button @click="isOpen = false" class="mt-4 px-4 py-2 bg-red-500 text-white rounded">Close</button>
        </div>
    </div>
</div>

คำอธิบาย:

Modal นี้รองรับการใช้งานฟอร์มพร้อมฟังก์ชันส่งข้อมูล
ใช้ x-model เพื่อจัดการ State ของข้อมูลในฟอร์ม

สรุป

ในบทนี้ คุณได้เรียนรู้การสร้าง Modal ด้วย Alpine.js โดยใช้ x-show, Transition, และ Slot ตัวอย่างครอบคลุม Modal แบบพื้นฐาน, Dynamic Modal, และ Modal พร้อมฟอร์ม การสร้าง Modal ด้วย Alpine.js ช่วยเพิ่มความสามารถในการโต้ตอบของเว็บได้อย่างง่ายดายและยืดหยุ่น!