Back to application components
Modals
Modal and dialog components for web applications. Includes simple modals, close buttons, and action modals with responsive, customizable designs.
<button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50"
>
<div class="flex flex-col gap-4">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>
<p id="modalDescription" class="text-pretty text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
>
<div class="flex flex-col gap-4">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Modal Title
</h2>
<p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50"
>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>
<button
type="button"
data-modal-close
class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
aria-label="Close"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p id="modalDescription" class="text-pretty text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Modal Title
</h2>
<button
type="button"
data-modal-close
class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
aria-label="Close"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50"
>
<div class="flex flex-col gap-4">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>
<p id="modalDescription" class="text-pretty text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
>
<div class="flex flex-col gap-4">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Modal Title
</h2>
<p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50"
>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>
<button
type="button"
data-modal-close
class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
aria-label="Close"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p id="modalDescription" class="text-pretty text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Modal Title
</h2>
<button
type="button"
data-modal-close
class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
aria-label="Close"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50"
>
<div class="flex flex-col gap-4">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>
<p id="modalDescription" class="text-pretty text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<label for="Confirm" class="block">
<span class="text-sm font-medium text-gray-700">
Please type "Confirm" to complete action
</span>
<input
type="text"
id="Confirm"
class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm focus:ring-2 focus:ring-indigo-600 sm:text-sm"
/>
</label>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
>
<div class="flex flex-col gap-4">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Modal Title
</h2>
<p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<label for="Confirm" class="block">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">
Please type "Confirm" to complete action
</span>
<input
type="text"
id="Confirm"
class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm focus:ring-2 focus:ring-indigo-600 sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white dark:focus:ring-indigo-300"
/>
</label>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50"
>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl">Modal Title</h2>
<button
type="button"
data-modal-close
class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
aria-label="Close"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p id="modalDescription" class="text-pretty text-gray-700">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<label for="Confirm" class="block">
<span class="text-sm font-medium text-gray-700">
Please type "Confirm" to complete action
</span>
<input
type="text"
id="Confirm"
class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm sm:text-sm"
/>
</label>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script><button
data-modal-open
class="rounded border border-gray-300 bg-gray-100 px-3 py-1.5 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-white"
>
Open
</button>
<dialog
closedby="any"
aria-labelledby="modalTitle"
aria-describedby="modalDescription"
class="m-auto max-w-xl rounded-lg bg-white p-6 shadow-lg backdrop:bg-black/50 dark:bg-gray-900 dark:backdrop:bg-white/50"
>
<div class="flex flex-col gap-4">
<div class="flex items-start justify-between">
<h2 id="modalTitle" class="text-xl font-bold text-gray-900 sm:text-2xl dark:text-white">
Modal Title
</h2>
<button
type="button"
data-modal-close
class="-me-4 -mt-4 rounded-full p-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:text-gray-500 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
aria-label="Close"
>
<svg
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="size-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<p id="modalDescription" class="text-pretty text-gray-700 dark:text-gray-200">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, nisi eu
consectetur. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<label for="Confirm" class="block">
<span class="text-sm font-medium text-gray-700 dark:text-gray-200">
Please type "Confirm" to complete action
</span>
<input
type="text"
id="Confirm"
class="mt-0.5 w-full rounded border-gray-300 bg-white text-gray-900 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
/>
</label>
<div class="flex justify-end gap-2">
<button
type="button"
data-modal-close
class="rounded bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Cancel
</button>
<button
type="button"
data-modal-close
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 focus:ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:bg-blue-300 dark:text-gray-900 dark:hover:bg-blue-200 dark:focus:ring-indigo-300 dark:focus:ring-offset-gray-900 dark:focus-visible:ring-indigo-300 dark:focus-visible:ring-offset-gray-900"
>
Done
</button>
</div>
</div>
</dialog>
<script>
const modalEl = document.querySelector('dialog')
const openButtonEl = document.querySelector('[data-modal-open]')
openButtonEl.addEventListener('click', () => modalEl.showModal())
document.querySelectorAll('[data-modal-close]').forEach((buttonEl) => {
buttonEl.addEventListener('click', () => modalEl.close())
})
</script>