Feature

Basic Modal with Alpine JS

Preview

Basic animated modal with Alpine JS. This feature needs a little help from the JS to get the nice animated effect.

NOTE Alpine JS handles the closing of the modal and I set a timeout in javascript to set the close event to the modal component.

setTimeout(() => {
  this.pushEventTo(event.detail.id, "close", {})
}, 300);

That gives the time for the close-animation to run and LiveView will then remove the modal from the DOM.

lib/phoenix_features_web/live/components/modal_simple.ex
defmodule PhoenixFeaturesWeb.Components.ModalSimple do
  use PhoenixFeaturesWeb, :live_component

  alias PhoenixFeaturesWeb.Components.Modal

  def update(assigns, socket) do
    {:ok,
      socket
      |> assign(assigns)
    }
  end
end