How can I place my fixed alert message in front of HTML <dialog> element, opened with showModal()?

Question

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.

Answer 1

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.