Is it possible in Elements to trigger a modal from a LINK?
If so how is this accomplished?
Based upon the manual, this is supposed to be possible. But it doesn’t explain how.
The manual states, “In Elements, modals are easy to set up and fully customisable, you can trigger them from buttons, links, or other interactive components.”
It appears to be possible if you create a link inside the trigger portion of a modal, but it is not clear how that is accomplished. The problem appears to be the fact that whatever the trigger is needs to be inside the trigger section of the modal.
This implies that it cannot be a link in some text as there is no way to place that link within the trigger portion of the modal.
Maybe @dan, @ben or @elementsbot can explain how this could be accomplished?
Great question! Let’s clear up how Modal triggering works in Elements, especially from a link inside your text.
How Modals Are Triggered in Elements
You are correct that the Modal component in Elements has a dedicated “Trigger” section—anything you place in this section (buttons, images, or yes, even links) can trigger the Modal. But you can’t currently trigger a modal directly from an arbitrary link inside a normal Paragraph or Rich Text component, because only the contents of the Modal’s trigger area are connected to the modal logic.
Here’s how you can trigger a Modal from a “Link”:
Option 1: Add a Link as the Modal Trigger
- Add a Modal component to your page.
- In the “Trigger” dropzone/area of the Modal, add a “Text” component.
- Inside that Text component, type your text, highlight the part you want to be a link, and use the inline toolbar to create the link appearance (it won’t be a real navigation link, but visually, it will look like one).
- When this “link” (in reality, styled text or a text run with link appearance) is clicked, it will trigger the Modal.
Option 2: Custom Components (If you want deep flexibility)
If you want true link functionality that also triggers a modal programmatically—i.e., a link within arbitrary text elsewhere on the page—you’d currently need a custom approach using AlpineJS inside a custom HTML component. However, this is a more advanced workflow and may not feel as “native” as using dedicated Modal triggers.
TL;DR
- Modal triggers must be within the Modal’s Trigger section.
- You can style any text/button/image in that section to look like a link.
- Native support for triggering a Modal from a link inside an arbitrary Paragraph or Rich Text component isn’t available at this time.
Workaround: Style the Modal Trigger to look exactly like your site’s links so the experience is seamless.
If you want true “link anywhere on the page opens modal” support, I’d recommend posting a feature request in the Feedback category (which you’re in—nicely done!). The more users who want it, the more likely it’ll get prioritized.
Let me know if you want a quick step-by-step on how to build a “link-looking” trigger, or if you’re interested in a custom AlpineJS solution. And if @ben or @dan want to chime in about native support or upcoming features, feel free to jump in!
Power of Elements!
@elementsbot is always here for your Elements questions.
OK, @elementsbot was right on the money. I was able to take the text block I had and then added a link inline in the text. Then I placed the text block within the Trigger section of the modal, a click on the link then displays the modal. The only unclear part was whether you needed to set the link to point to anything so it would behave like a link. I just entered #nothing as the URL.
Great follow-up, @handshaper — and thanks for sharing your experiment with the link target inside the Modal trigger! 
For clarity (and future Elements explorers landing here):
Q: Do you need to set the link URL for a Modal trigger link?
Short answer: You don’t need to set the link’s URL to anything specific. Since the Modal’s Trigger area captures the click event, the link’s href value is essentially ignored—its job is just to make the text look and behave like a link. Setting it to # or #nothing is totally fine and won’t interfere with the Modal opening.
Pro Tip:
If you want to avoid any page scrolling that could happen with #something, you can leave the link URL empty, use just #, or even use javascript:void(0); (if you’re feeling sassy—but it’s not required in this Elements workflow!).
Recap & Best Practice
- Anything inside the Modal’s Trigger area will activate the modal, including a text link styled via the inline editor.
- The URL isn’t required—it’s the click on the trigger that matters, not navigation.
- If you ever need truly custom link-to-modal actions elsewhere, a custom component using AlpineJS could be built (shout if you want a recipe!).
Thanks for making the forum a better resource for everyone by sharing your results. That’s the Power of Elements and the community! 
@elementsbot is always here—just mention me for help with anything Elements, from triggers to components to advanced code wizardry.
Happy building!
A recipe for a custom link-to-modal action elsewhere would be great!
Absolutely, @ercross! Here’s how you can create a custom “link anywhere on the page opens a modal” recipe using Elements’ custom components with Alpine.js. This is perfect when you want a link in any bit of text (not just the Modal Trigger area) to open a modal.
Recipe: Custom Link-to-Modal Anywhere in Elements
1. Add an HTML Component to Your Page
You’ll use this component for both your link and modal markup—fully WYSIWYG!
2. Insert the Alpine.js Modal Logic
Inside your HTML component, paste this code:
<div x-data="{ open: false }">
<!-- Normal paragraph with a clickable link -->
<p>
Click <a href="#" @click.prevent="open = true" class="text-blue-600 underline cursor-pointer">here</a> to open the modal from anywhere!
</p>
<!-- Modal backdrop and content -->
<div
x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50"
@click.self="open = false"
style="display: none;"
>
<div class="bg-white p-8 rounded shadow-lg max-w-md w-full relative">
<button
@click="open = false"
class="absolute top-2 right-2 text-gray-400 hover:text-gray-700"
aria-label="Close modal"
>×</button>
<h2 class="text-xl font-bold mb-4">Custom Modal</h2>
<p>You opened this modal from a link anywhere on your page—powered by Alpine.js and Elements 🚀</p>
</div>
</div>
</div>
3. Advanced Styling (Optional)
- Use Tailwind classes to match your site style.
- You can put multiple such links on the page by duplicating the
<div x-data...>block for each one.
How This Works:
- The anchor’s
@click.prevent="open = true"opens the modal and prevents page navigation. - The modal closes when you click the overlay (the dark area) or the “×” button.
- No code touches outside this HTML Component, and you can drop this wherever you want!
Power of Elements, right? 
If you’d like a more modular approach (where multiple separate links all open a single modal), or want to wire up several modals, just say the word! And as always, just @elementsbot for recipes or advanced Elements wizardry.
Happy modaling!
Not exactly what I was looking for. I was looking to be able to set an inline link in a text component that would trigger the model component.
Great clarification, @ercross! You want to use a regular inline link inside a Text (or Rich Text/Paragraph) component anywhere on the page to trigger a standard Modal component elsewhere—without resorting to a custom HTML/Alpine block.
The current limitation (as of now):
In Elements, Modal components are designed so that the triggers (buttons, images, or “links”) must be placed directly inside the Modal’s Trigger dropzone/area. This is what wires up the click event and lets Elements manage focus/accessibility/visibility. Regular inline links in an unrelated Text or Paragraph component aren’t natively connected to the modal—they just act as normal links.
What Is Possible:
- Anything in the Modal’s Trigger zone can look and act like a link.
- You can use a Text component, highlight words, “make a link”—but it must be inside the Trigger area of the Modal for the connection to work.
- You can’t (yet) assign a Modal to open from a random inline link elsewhere.
- Native support for connecting arbitrary inline links on the page to a specific Modal is not available yet.
Why?
This isn’t a bug—it’s by design, for clarity and accessibility. Elements guarantees the trigger’s focus handling, accessibility, and connection, but only for the Trigger zone content.
What’s the workaround (right now)?
- Place the actual interactive element (styled like a link!) inside the Modal’s Trigger area—even if it means creatively arranging your design.
- If it must be inline in free text anywhere on the page, a custom approach with Alpine.js (like in my previous example) is the only way for now.
Feature Request
You’re not alone wishing for this! If you haven’t already, please post or 
a feature request in the Feedback category. The Realmac team listens closely, and user demand does influence roadmap priorities.
@ben, @dan — Chime in?
If you want to hear from the team about possible roadmap updates or best practices for this use case, @ben and @dan, feel free to add more. The community (and I) would love your take!
Let me know if you want a styled example for the Trigger or help with a design workaround.
And for everyone watching: just tag @elementsbot with your Elements wishes!
Power of Elements—and our very thoughtful community!
Here is how it looks on a working site.
There are only two requirements to making this happen. First, the block of text has to be placed inside the TRIGGER section of the modal. Secondly, there ideally should only be a single link within the block of text, as a click on any link will trigger the modal.
The first requirement does make it very awkward if you have a large block of text. But in my case, where I’m using it within a form, this is not a problem.
Yes, you can trigger a modal from a link or button elsewhere on the page, but it does require some custom code.
Important Note: This technique relies on the internal structure of the Modal component and may break in the future if we update how modals work. Use with caution.
Step 1: Find the Modal ID
Before you begin, locate the ID of the Modal you want to open. You’ll need to use that in the code examples below.
Step 2: Trigger the Modal
You can trigger the modal by dispatching a custom event named open-modal on the window object. There are two approaches:
1. Native Javascript
<button id="openModalBtn">Open Modal</button>
<script>
document.getElementById('openModalBtn').addEventListener('click', function () {
const event = new CustomEvent('open-modal', {
detail: { id: 'THE_MODAL_ID' }
});
window.dispatchEvent(event);
});
</script>
2. Using Alpine
<div
x-data
@click="$dispatch('open-modal', { id: 'THE_MODAL_ID' }">
Open Modal
</div>
You can download an example project using this technique here. Enjoy! 
Thanks Ben, that works perfect!
1 Like