I have a <dialog>
element styled with daisyUI and opened with showModal() using a <button>
(here is Tailwind play link):
<button class="btn" onclick="my_modal_1.showModal()">open modal</button>
<dialog id="my_modal_1" class="modal modal-bottom z-10">
<div class="modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
<div class="modal-action">
<form method="dialog">
<button class="btn">Close</button>
</form>
</div>
</div>
</dialog>
<div class="fixed inset-x-0 bottom-0 z-20 h-64 bg-yellow-500 text-white">alert</div>
I want my fixed <div>
in front of the modal. I've used z-20
for my <div>
, z-10
for the dialog, but it doesn't work.
It works if I use show()
instead of showModal()
. Any help is much appreciated.
what you want to achieve is impossible:
the <dialog>
element was introduced into the HTML5 language in order to overcome disparities on windows.alert()
and windows.confirm()
methods of the JavaScript language.
In the case of using a showModal()
, it behaves as an independent window always placed in the foreground of any previous view, and in your case, with no consider of the z-index
CSS properties used outside of your dialog box, as would a JavaScript call to a windows.alert()
command.