Prima.Modal.JS (Prima v0.3.0)

View Source

JavaScript commands for client-side modal control.

Summary

Functions

Closes the currently open modal.

Opens a modal with the given ID.

Opens a modal with the given ID, chaining with existing JS commands.

Functions

close()

Closes the currently open modal.

This function dispatches a JavaScript event to close any open modal. It can be used from buttons, form submissions, or other user interactions.

Example

<.button phx-click={Prima.Modal.JS.close()}>
  Close
</.button>

# Chain with other JS commands
<.button phx-click={Prima.Modal.JS.close() |> JS.push("modal-closed")}>
  Close and Notify
</.button>

open(id)

Opens a modal with the given ID.

This function dispatches a JavaScript event to show the modal. The modal must already be rendered in the DOM with the corresponding ID.

Parameters

  • id - The ID of the modal to open (string)

Example

<.button phx-click={Prima.Modal.JS.open("my-modal")}>
  Open Modal
</.button>

open(js, id)

Opens a modal with the given ID, chaining with existing JS commands.

This function allows you to chain modal opening with other JavaScript commands, enabling complex interactions like navigation combined with modal display.

Parameters

  • js - A Phoenix.LiveView.JS struct containing previous commands
  • id - The ID of the modal to open (string)

Example

# Chain with navigation
<.button phx-click={JS.patch("/modal/history") |> Prima.Modal.JS.open("my-modal")}>
  Navigate and Open Modal
</.button>

# Chain with custom events
<.button phx-click={JS.push("track") |> Prima.Modal.JS.open("my-modal")}>
  Track and Open
</.button>