Make modal work without HTML <dialog>

[tranvansang]

This post discusses the Modal component: https://daisyui.com/components/modal/

Currently, HTML <dialog> tag is required to use this component.
Native dialog tag has several disadvantages:

• cannot use <form> tag
• z-index cannot be overwritten by non-dialog element.

For example, in my usecase, my app has a voice agent with sub-title at the bottom center of the screen.
The agent shows a confirmation box, which I want to use the Modal component. But it is impossible to bring the sub-title above the modal if used with <dialog>.

======

Edited: I made mistake on declaring the first disadvantage.
Correction: to close the dialog with a native button, the native button requires wrapped in a <form method="dialog"> which conflicts with form in the application logic, since form does not allow nesting.

[saadeghi]

1. You can use <form>: https://play.tailwindcss.com/SKEFnzbTO5
2. Indeed you can't put items on top of <dialog> because it's top-level, but you can put items inside the modal, outside of modal-box: https://play.tailwindcss.com/YnpkHamsIy

Also if you don't prefer <dialog> at all, there are 2 other methods: https://daisyui.com/components/modal/

Let me know if you have a question.

[tranvansang]

thanks for the prompt response.

1. I made a mistake in the OP. I have added "edited" in the OP. While this disadvantage just just prevents usage of the native dialog-closing-button, there is workaround.
2. the alert is always on, before firing the modal.

https://play.tailwindcss.com/AaOfufY48P

The 2 other methods requires additional html elements, also marked as "legacy".

[saadeghi]

You don't need to nest <form>s of course. Here's an example with submit-able form + close button:
https://play.tailwindcss.com/U0HH6IurAk

The <form> element itself has no style. you can use them anywhere and you can use multiple ones next to each other.

Alternatively you can use JS close() method to close the <dialog> instead of <form method="dialog">

About toasts (or anything you want to be visible when modal is open), I already gave you a working example.

Put items INSIDE the modal, outside of modal-box

https://play.tailwindcss.com/YnpkHamsIy

The 2 other methods requires additional html elements, also marked as "legacy".

Yes, because HTML <dialog> is the HTML standard now and we recommend using that. The other 2 methods are not going to be removed from daisyUI but they don't have all the features <dialog> brings. For example closing the modal with Esc key…

[tranvansang]

thanks for following up.

The remaining point I want to discuss is the number 2.

About toasts (or anything you want to be visible when modal is open), I already gave you a working example.

In your example: the "toast" is invisible when the modal closed.

Is it possible to have a div visible regardless of the modal close or open?

====
Moreover, there is case requiring multiple dialogs (i.e., a registration form in a modal, and a confirmation modal above the form), do I need to move the "toast" into the top modal, and then move back when the modal closed?

[saadeghi]

If you want a toast to be always visible and be on top of <dialog> as well, you can open the <dialog> modeless using .show() instead of .showModal().
And set a high z-index for toast, like z-1000
https://play.tailwindcss.com/Ysw66Oilec

This way <dialog> will be open not as a "top-layer", but since it's not top-layer anymore, pressing Esc key doesn't close it anymore.

Read more:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/show
• http://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal