How to open/close modal in tailwind-elements with javascript function?

[mstdmstd]

I use modal from https://tailwind-elements.com/docs/standard/components/modal/
in laravel/alpinejs app and looking at these examples I see that modal is opened/closed with
data-bs-target link .
How can I open/close this modal with javascript?
I need to assign on Save button javascript function and run axios request.
On succes I need to hide this modal

Thanks!

[m_hutley]

Well, you could .click() the modal’s close button…

[mstdmstd]

@m_hutley

.click(

Thanks! I also need to open this dialog with JS. Close and open several times. How can I do it ?

[m_hutley]

click on whatever opens the modal? I mean… basically if you dont know how the framework is opening and closing the modal, the simplest answer is to mimic the user’s interaction and let the code sort itself out.

[mstdmstd]

That is not clear. Please, detalize

[dennisjn]

Why not use the html5 dialog element?
It is now supported in most of the latest browser versions.
Once setup it is opened with .showModal() method
and closed with .close() method
The dialog element can be appended to any other element including the body element.

[gry14]

ngAfterViewInit(): void {
    setTimeout(() => {
      const modal = document.querySelector(".modal");
      const container = modal?.querySelector(".container");
      const backdrop = document.querySelector("#backdrop");
      const close = document.querySelector(".close");

      modal?.classList.remove("hidden");
      backdrop?.classList.remove("hidden");
      modal?.classList.add("show");
      backdrop?.classList.add("show");

      document.querySelector(".modal")?.addEventListener("click", (e: any) => {
        if (e.target !== modal && e.target !== container) return;
        modal?.classList.add("hidden");
        backdrop?.classList.add("hidden");
        modal?.classList.remove("show");
        backdrop?.classList.remove("show");
      });

      close?.addEventListener("click", () => {
        modal?.classList.add("hidden");
        backdrop?.classList.add("hidden");
        modal?.classList.remove("show");
        backdrop?.classList.remove("show");
      })
      
    }, 1000)
  }

This is what I do, I have no other choice