Alpine.js - modal, 모달창 만들기

 

            <!-- Modal -->
            <div x-data="{
                    open: false,
                    accept() {
                        console.log('accepted')
                    }
            }">

                <button @click="open = true" class="inline-flex items-center py-2 px-6 bg-purple-600 hover:bg-opacity-95 text-white rounded-md shadow">
                    Toggle Modal
                </button>

                <template x-teleport="body">

                    <!-- Backdrop -->
                    <div x-show="open" class="fixed flex justify-center items-center left-0 top-0 bottom-0 right-0 z-10 bg-black/50">

                        <!-- Dialog -->
                        <div x-show="open" x-transition @click.outside="open = false"
                            class="w-[90%] md:w-1/2 bg-white rounded-lg">

                            <!-- Modal Title -->
                            <div
                                class="py-2 px-4 text-lg font-semibold bg-gray-100 rounded-t-lg flex items-center justify-between">
                                <h2>Modal Title</h2>
                                <button @click="open = false">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>

                            <!-- Modal Body -->
                            <div class="p-4">Modal Content</div>
                            
                            <!-- Modal Footer -->
                            <div class="py-2 px-4 text-lg flex justify-end font-semibold bg-gray-100 rounded-b-lg">
                                <button @click="accept"
                                    class="inline-flex items-center py-1 px-3 bg-emerald-500 hover:bg-opacity-95 text-white rounded-md shadow mr-2">
                                    Accept
                                </button>
                                <button @click="open = false"
                                    class="inline-flex items-center py-1 px-3 bg-gray-300 hover:bg-opacity-95 text-gray-800 rounded-md shadow">
                                    Cancel
                                </button>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

 

 

x-teleport 지시어를 사용하면 Alpine 템플릿의 일부를 페이지의 DOM의 다른 부분으로 전송할 수 있다.

이 기능은 모달(특히 중첩 모달)과 같은 경우에 유용하며, 현재 Alpine 구성 요소의 z-인덱스에서 벗어나는 데 도움이 됩니다.