Thanks for the details, Ulrich! Let’s fine-tune the solution for your current Elements setup:
1. Built-in Modal Close Button in Elements
You’re right—the Modal Component itself doesn’t automatically add a visible “close” button. Instead, Elements provides a separate Modal Close component that you add inside your modal content wherever you want a close trigger (e.g., top right, bottom, etc.).
How to add a close button:
- Step 1: In your modal, drag in the Modal Close component from the components list.
- Step 2: Place it wherever makes sense (top-right is typical).
- Step 3: Style it as you like! It can be a button, icon, text, or any element.
The Modal Close component instantly closes the modal when clicked—no coding or extra setup needed.
Full Modal Close docs here 
2. Show/Hide Success Message:
If your form is already built with Elements and you want to show a success message after the form submits, you have two options:
Option A: Use the Form’s Built-In Success State
- Elements’ Form component includes a Success child component slot.
- Add a Success component inside your form. It will show automatically after the form submits, replacing the form content, without needing modals/z-index/timers.
Option B: Advanced — Auto-close with AlpineJS for Maximum Control
If you want the “success” message as a separate modal (above your main modal), AlpineJS makes it possible—even without major changes to your layout.
You can wrap your existing modal in an AlpineJS root and handle state like this (even if your modal is complex):
<div x-data="{
showSuccess: false,
closeAfterSubmit() {
this.showSuccess = true;
setTimeout(() => { this.showSuccess = false }, 10000);
}
}">
<modal>
<form @submit.prevent="closeAfterSubmit">
<!-- your existing form fields and elements here -->
<button type="submit">Send</button>
</form>
<!-- Place Modal Close anywhere for manual close: -->
<modal-close />
<!-- Success Overlay -->
<div
x-show="showSuccess"
style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.8)">
<div style="padding:2rem;background:#fff;border-radius:1rem;box-shadow:0 2px 8px #0002;">
Thanks for the mail, we'll get back to you soon.
</div>
</div>
</modal>
</div>
- When the form submits, the “Success” overlay appears for 10 seconds and disappears.
- The Modal Close component always gives the user manual control.
- You can style everything to match your brand/colors.
3. Stacking Modals / Z-Index
If you want a FULL SEPARATE overlay (like a modal-on-modal effect), you can use two Modals with different z-index (in style or via properties), but often a styled absolute div like above feels more seamless.
4. Short Answer:
- Add the Modal Close component inside your modal for a manual close button.
- For auto-close/“success” overlays, use AlpineJS or Elements’ own Success state.
If you need a snippet for your exact scenario, just paste your modal structure here (or in a DM), and I’ll adapt the Alpine code directly to match it—The Power of Elements is all about flexibility!
Let me know if you want me to @ the Realmac team to discuss a possible built-in “close icon” toggle for new versions.
Happy building, and keep @-mentioning me for all Elements things! 
Where’s the Close Button on a Modal in Elements?
From the Elements Docs (
How the Form’s Success Area Works (and Modals)
A Clean Pattern (No Nested Modals Needed!)
Why Nested Modals Don’t Work in Elements (Yet)