How to trigger the modal popup from click a button in ELixir Phoenix

Question

Phoenix 1.7 generator comes with a modal in "CoreComponents". The instructions do not explain how to toggle it. I am not very good at working with Elixir Phoenix and I am trying to learn.

The base syntax is:

  <.modal
  id="user-modal"
  show >

The show attribute is what triggers the popup.

In JavaScript, to trigger a modal you typically have a boolean to toggle the "show" attribute value. In Elixir I have no idea how to do that nor do I know if that is the approach that is expected of the developer to make it work.

The documentation is here:

      <.modal id="confirm-modal">
        Are you sure?
        <:confirm>OK</:confirm>
        <:cancel>Cancel</:cancel>
      </.modal>

  JS commands may be passed to the `:on_cancel` and `on_confirm` attributes
  for the caller to react to each button press, for example:

      <.modal id="confirm" on_confirm={JS.push("delete")} on_cancel={JS.navigate(~p"/posts")}>
        Are you sure you?
        <:confirm>OK</:confirm>
        <:cancel>Cancel</:cancel>
      </.modal>

The example does not explicitly show the show attribute, In the working example below from the phoenix generator the show attribute is used.

---

<.modal
  :if={@live_action in [:new, :edit]}
  id="user-modal"
  show
  on_cancel={JS.navigate(~p"/users")}
>

<.live_component
    module={AppxWeb.UserLive.FormComponent}
    id={@user.id || :new}
    title={@page_title}
    action={@live_action}
    user={@user}
    patch={~p"/users"}
  />
</.modal>

I'm curious what the thought process is to think about this problem. Like I said, in JavaScript it's an Event Handler and a boolean.

The show attribute doesn't look like a string so I have no idea how to handle it dynamically.

Answer 1

Here's the answer. It's two lines of code. The ID is used and not the show attribute.

 <.modal
    id="user-modal"
    >
  </.modal>


<button phx-click={show_modal("user-modal")}>  Click me </button>