Modals are implemented using the Stimulus modal_controller or overriding the Turbo confirm method.
<form>
<button
class="btn btn-white"
data-turbo-confirm="Are you sure?"
>Confirm</button>
</form>Are you sure you want to do that. Seriously?
<div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1">
<button class="btn btn-white" data-action="click->modal#open:prevent">Open Small Modal</button>
<div class="hidden fixed inset-0 bg-gray-900 bg-opacity-80 overflow-y-auto flex items-center justify-center backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-80" data-modal-target="background" data-action="click->modal#closeBackground" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="bg-opacity-0 backdrop-blur-none" data-transition-enter-to="bg-opacity-80 backdrop-blur-sm" data-transition-leave="transition-all ease-in-out duration-200" data-transition-leave-from="bg-opacity-80 backdrop-blur-sm" data-transition-leave-to="bg-opacity-0 backdrop-blur-none">
<div class="max-w-sm max-h-screen w-full relative" data-modal-target="container" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="opacity-0" data-transition-enter-to="opacity-100" data-transition-leave="transition ease-in-out duration-200" data-transition-leave-from="opacity-100" data-transition-leave-to="opacity-0">
<div class="p-6 bg-white rounded shadow-lg dark:bg-gray-900 dark:text-gray-200">
<button type="button" data-action="modal#close:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
<span class="sr-only">Close</span>
</button>
<h2 class="text-lg mb-2">Are you sure?</h2>
<p class="text-sm mb-2">Are you sure you want to do that. Seriously?</p>
<div class="flex justify-end items-center flex-wrap gap-2 mt-4">
<button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
<button class="btn btn-primary" data-action="click->modal#close:prevent">Continue</button>
</div>
</div></div></div></div>Are you sure you want to do that. Seriously?
<div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1">
<button class="btn btn-white" data-action="click->modal#open:prevent">Open Medium Modal</button>
<div class="hidden fixed inset-0 bg-gray-900 bg-opacity-80 overflow-y-auto flex items-center justify-center backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-80" data-modal-target="background" data-action="click->modal#closeBackground" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="bg-opacity-0 backdrop-blur-none" data-transition-enter-to="bg-opacity-80 backdrop-blur-sm" data-transition-leave="transition-all ease-in-out duration-200" data-transition-leave-from="bg-opacity-80 backdrop-blur-sm" data-transition-leave-to="bg-opacity-0 backdrop-blur-none">
<div class="max-w-md max-h-screen w-full relative" data-modal-target="container" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="opacity-0" data-transition-enter-to="opacity-100" data-transition-leave="transition ease-in-out duration-200" data-transition-leave-from="opacity-100" data-transition-leave-to="opacity-0">
<div class="p-6 bg-white rounded shadow-lg dark:bg-gray-900 dark:text-gray-200">
<button type="button" data-action="modal#close:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
<span class="sr-only">Close</span>
</button>
<h2 class="text-lg mb-2">Are you sure?</h2>
<p class="text-sm mb-2">Are you sure you want to do that. Seriously?</p>
<div class="flex justify-end items-center flex-wrap gap-2 mt-4">
<button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
<button class="btn btn-primary" data-action="click->modal#close:prevent">Continue</button>
</div>
</div></div></div></div>Are you sure you want to do that. Seriously?
<div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1">
<button class="btn btn-white" data-action="click->modal#open:prevent">Open Large Modal</button>
<div class="hidden fixed inset-0 bg-gray-900 bg-opacity-80 overflow-y-auto flex items-center justify-center backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-80" data-modal-target="background" data-action="click->modal#closeBackground" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="bg-opacity-0 backdrop-blur-none" data-transition-enter-to="bg-opacity-80 backdrop-blur-sm" data-transition-leave="transition-all ease-in-out duration-200" data-transition-leave-from="bg-opacity-80 backdrop-blur-sm" data-transition-leave-to="bg-opacity-0 backdrop-blur-none">
<div class="max-w-lg max-h-screen w-full relative" data-modal-target="container" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="opacity-0" data-transition-enter-to="opacity-100" data-transition-leave="transition ease-in-out duration-200" data-transition-leave-from="opacity-100" data-transition-leave-to="opacity-0">
<div class="p-6 bg-white rounded shadow-lg dark:bg-gray-900 dark:text-gray-200">
<button type="button" data-action="modal#close:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
<span class="sr-only">Close</span>
</button>
<h2 class="text-lg mb-2">Are you sure?</h2>
<p class="text-sm mb-2">Are you sure you want to do that. Seriously?</p>
<div class="flex justify-end items-center flex-wrap gap-2 mt-4">
<button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
<button class="btn btn-primary" data-action="click->modal#close:prevent">Continue</button>
</div>
</div></div></div></div>Are you sure you want to do that. Seriously?
<div data-controller="modal" data-action="keydown.esc->modal#close" tabindex="-1">
<button class="btn btn-white" data-action="click->modal#open:prevent">Open Fullscreen Modal</button>
<div class="hidden fixed inset-0 bg-gray-900 bg-opacity-80 overflow-y-auto flex items-center justify-center backdrop-blur-sm dark:bg-gray-800 dark:bg-opacity-80" data-modal-target="background" data-action="click->modal#closeBackground" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="bg-opacity-0 backdrop-blur-none" data-transition-enter-to="bg-opacity-80 backdrop-blur-sm" data-transition-leave="transition-all ease-in-out duration-200" data-transition-leave-from="bg-opacity-80 backdrop-blur-sm" data-transition-leave-to="bg-opacity-0 backdrop-blur-none">
<div class="fixed top-0 left-0 w-full h-full relative" data-modal-target="container" data-transition-enter="transition ease-in-out duration-200" data-transition-enter-from="opacity-0" data-transition-enter-to="opacity-100" data-transition-leave="transition ease-in-out duration-200" data-transition-leave-from="opacity-100" data-transition-leave-to="opacity-0">
<div class="p-6 w-screen h-screen bg-white dark:bg-gray-900">
<button type="button" data-action="modal#close:prevent" class="hover:cursor-pointer absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg>
<span class="sr-only">Close</span>
</button>
<div class="flex items-center h-full">
<div class="w-2/3 mx-auto">
<h2 class="text-lg mb-2">Are you sure?</h2>
<p class="text-sm mb-2">Are you sure you want to do that. Seriously?</p>
<div>
<button class="btn btn-white" data-action="click->modal#close:prevent">Cancel</button>
<button class="btn btn-primary" data-action="click->modal#close:prevent">Continue</button>
</div>
</div>
</div>
</div></div></div></div>