Create a native modal with the Modal component. The id property is required and used to link open and close buttons as highlighted in the example code below. A Modal may have a fixed footer eg. for additional buttons, you can add the markup with the footer slot. A modal’s content is scrollable on overflow.
'id' => 'modal-id', // required 'footer' => false,
<x-button variant="destructive" label="Konto löschen" href="#modal-account-closing" data-action="open-modal" /> <x-modal id="modal-account-closing"> <h3 class="mb-6">Konto löschen</h3> <p class="mb-2">Wenn sie diesen Vorgang bestätigen, bekommen sie eine E-Mail mit einem Link, der es ihnen zwei Wochen lang ermöglicht, den Vorgang rückgängig zu machen.</p> <p class="text-red-800">Nach Ablauf der Frist wird ihr Konto unwiederruflich gelöscht.</p> <x-slot:footer> <x-button data-action="close-modal" label="Abbrechen" /> <x-button label="Konto löschen" variant="destructive" href="/app/konto/schliessung" /> </x-slot> </x-modal>