|
|
@ -1,14 +1,6 @@ |
|
|
<dialog |
|
|
|
|
|
id="main-dialog" |
|
|
|
|
|
class=" |
|
|
|
|
|
top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 |
|
|
|
|
|
bg-base-200 shadow-md rounded-lg |
|
|
|
|
|
p-6 text-primary ring-2 shadow-md |
|
|
|
|
|
backdrop:backdrop-grayscale backdrop:backdrop-blur-[0.1em] |
|
|
|
|
|
animate-aurora |
|
|
|
|
|
" |
|
|
|
|
|
> |
|
|
|
|
|
<h2 data-modal="title" class="text-2xl font-bold mb-2">Dialog Title</h2> |
|
|
|
|
|
|
|
|
<dialog id="main-dialog" class="modal"> |
|
|
|
|
|
<div class="modal-box bg-base-200"> |
|
|
|
|
|
<h3 data-modal="title" class="text-lg font-bold">Dialog Title</h3> |
|
|
|
|
|
|
|
|
<p class="mb-6"> |
|
|
<p class="mb-6"> |
|
|
This is a centered dialog using the HTML dialog element with Tailwind CSS. |
|
|
This is a centered dialog using the HTML dialog element with Tailwind CSS. |
|
|
@ -17,8 +9,9 @@ |
|
|
Aliquam nam ex sit vel nesciunt qui ducimus velit nulla. |
|
|
Aliquam nam ex sit vel nesciunt qui ducimus velit nulla. |
|
|
</p> |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="flex gap-2 justify-end"> |
|
|
|
|
|
<%= button_link_to 'OK', autofocus: true, value: 'confirm', class: "btn btn-accent ring-2 hover:ring-3", command: 'close', commandfor: 'main-dialog' %> |
|
|
|
|
|
<%= button_link_to 'Cancel', value: 'cancel', class: "btn btn-primary ring-2 hover:ring-3", command: 'close', commandfor: 'main-dialog' %> |
|
|
|
|
|
|
|
|
<div class="modal-action items-center text-center"> |
|
|
|
|
|
<%= button_link_to 'OK', value: 'confirm', class: "btn btn-primary", command: 'close', commandfor: 'main-dialog' %> |
|
|
|
|
|
<%= button_link_to 'Cancel', value: 'cancel', class: "btn btn-ghost", command: 'close', commandfor: 'main-dialog' %> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</dialog> |
|
|
</dialog> |