The custom modal feature in Frontly gives you the ability to design a fully personalized popup experience using your own layout, blocks, and styling. It’s perfect for users who want a more flexible interface for interacting with page content — or for those looking to build a custom alternative to the default Detail View.
Whether you’re designing a confirmation popup, a record preview, or a multi-block editor, custom modals let you take full control of the design and behaviour of your modal experience.
🛠️ Step 1: Design Your Modal
Start by dragging a Container block onto your page.
Place all the blocks you want inside this container — this could include text, buttons, form fields, or even other containers.
Once you're satisfied with your layout, open the More tab in the Container block settings and toggle on "Is Custom Modal."
⚠️ Important: This container acts as the root of the modal. Only blocks that are nested inside this container will be included in the modal. Any blocks outside of it will not be shown when the modal is triggered.
🎛️ Step 2: Add Display Conditions
In order for your custom modal to appear conditionally — like when a user clicks a button — you'll need to configure display conditions on the container.
In most cases, this will be based on a session variable being set. For example:
Show the modal only when
{{ session.showCustomModal }}equalstrue
📘 Need help with session-based display logic? Read our article on session variables and display conditions
💡 Tip: If you're using a data display block (like Table, List, Kanban, etc.) and you want a custom modal to appear instead of the default Detail View when a record is clicked, you’ll need to go to the block’s Actions tab and change the Record Click Action from “Detail View” to “Action.”
Then, use a Set Session State action to control the visibility of your custom modal through session variables.
✖️ Step 3: Create a Close Action
To close the modal, you’ll need to set up an action (usually from a button or icon inside the container) that updates the session variable used in your display condition so it no longer matches.
For example:
Set
{{ session.showCustomModal }}tofalseon clickThis causes the display condition to fail, and the modal disappears
This step is required, as there’s no automatic close button — it gives you complete control over the modal’s behaviour.
💡 Use Cases
Build a custom Detail View experience with more flexibility
Trigger advanced form flows with context-specific modals
Create confirmation popups or dynamic messages with fully custom designs