Alpine JS Modal

AlpineJS, Code

Mit AlpineJS lassen sich sehr einfach viele Aufgaben, welche eine moderne Webseite benötigt umsetzen. In diesem Artikel zeige ich ein Button mit einem Modal, wobei der komplette Inhalte des Modals innerhalb des Buttons gespeichert werden.

Jon Uhlmann

25. April 2023

Mit AlpineJS und mit Hilfe von dem Teleport-Feature von dem template Tag lassen sich das Modal komplett an einem Ort gespeichert und verwaltet werden. Das Modal wird dabei zum body teleportiert.

Hier der Button als Demo:

Der Fakt, das alle Inhalte in einer Komponente gespeichert werden macht das verwalten extrem einfach. Es ist nicht mehr nötig, an einer Stelle der Button und an einer anderen Stelle das Markup für das Modal gespeichert wird. Der Code hierfür ist relativ einfach, inkl. aller nötigen Accessibility Features. Die CSS-Klassen sind in diesem Beispiel für die einfacheren Lesbarkeit entfernt.

ButtonWithModal.html

<button type="button" x-data="{open:false}" x-on:click="open=true">
    Modal öffnen
    <template x-teleport="body">
        <div 
            x-show="open" 
            x-on:keydown.escape.prevent.stop="open=false"
            role="dialog"
            aria-modal="true"
            x-id="['modal-title']"
            :aria-labelledby="$id('modal-title')"
        >

            <!-- Overlay -->
            <div x-show="open" x-transition.opacity></div>

            <!-- Panel -->
            <div x-show="open" x-transition x-on:click="open=false">
                <div x-on:click.stop x-trap.noscroll.inert="open">
                    <!-- Title -->
                    <h2 :id="$id('modal-title')">Titel von dem Modal</h2>

                    <!-- Content -->
                    <p>Bist du sicher, dass du lernen möchtest, wie man ein tolles Modal erstellt?</p>

                    <!-- Buttons -->
                    <div>
                        <button type="button" x-on:click="open=false">
                            Nein, danke
                        </button>

                        <button type="button" x-on:click="open=false">
                            Ja, gerne
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>
</button>

Gehen wir kurz die einzelnen Punkte durch: Beim Button welcher alles umschliesst, wird mit x-data="{open:false}" AlpineJS instanziert. x-on:click="open=true" setzt dabei die Variable open auf true, falls auf den Button geklickt wird.

<template x-teleport="body"> teleportiert den kompletten Inhalt vom Tag zum body. Der Button hierbei bleibt mit dem Modal fix verbunden. x-id, :id und :aria-labelledby vergibt einfach eindeutige ID, es ist hier kein serverseitiger Aufwand mehr nötig. Somit können beliebig viele Modal implementiert werden ohne das es eine Kollision von ID im Markup mehr gibt.

Falls du es noch einfacher haben willst, kann ich dir die Alpine Headless Components ans Herz legen. Dadurch wird es noch einfacher, solche Modals (und noch vieles mehr) umzusetzen. Der Zugang hierfür ist nicht teuer und dabei wird die Weiterentwicklung von AlpineJS unterstützt. Eine Win-Win Situation für dich und dem Entwickler von AlpineJS.