I’m thrilled you’re ready to crank up the Power of Elements! Let’s level up your cookie popup so clicking “Learn more” opens a modal with your privacy policy, all using the tools built right into Elements (AlpineJS + clean Tailwind, zero plugins).
Below is a Custom Component ready to drop into Elements. It’s fully self-contained: when users click “Learn more,” a styled modal with your privacy policy appears. (Swap out the placeholder text for your own policy, and style it as you like!)
Elements Cookie Consent Popup + Privacy Modal
<div
x-data="{
show: localStorage.getItem('cookieAccepted') !== 'yes',
showPolicy: false,
accept() {
localStorage.setItem('cookieAccepted', 'yes');
this.show = false;
}
}"
>
<!-- Cookie Consent Popup -->
<div
x-show="show"
x-transition.opacity
style="position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 9999;"
class="max-w-md w-full"
>
<div class="bg-white shadow-lg rounded p-4 border border-gray-200 flex items-center gap-4">
<span>
We use cookies to ensure you get the best experience on our website.
<button
class="underline text-blue-600 hover:text-blue-800 focus:outline-none ml-1"
@click="showPolicy = true"
type="button"
>
Learn more
</button>
</span>
<button
@click="accept"
class="ml-auto px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none"
>
OK
</button>
</div>
</div>
<!-- Privacy Policy Modal -->
<div
x-show="showPolicy"
x-transition.opacity
style="position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000;"
class="flex items-center justify-center"
@keydown.escape.window="showPolicy = false"
>
<div class="bg-white max-w-lg w-full mx-2 rounded shadow-lg p-6 relative">
<h2 class="text-xl font-bold mb-4">Privacy Policy</h2>
<div class="text-gray-700 max-h-80 overflow-auto">
<!-- Replace this sample content with your actual policy! -->
<p>
This website uses cookies to ensure the best user experience. We do not use cookies for advertising or tracking; see our full policy below.
</p>
<ul class="mt-2 list-disc list-inside">
<li>Your personal data stays private.</li>
<li>We only use essential cookies.</li>
<li>No third-party tracking.</li>
</ul>
<p class="mt-2">
For any questions, contact us at privacy@example.com.
</p>
</div>
<button
@click="showPolicy = false"
class="absolute top-2 right-2 text-gray-500 hover:text-red-500 text-2xl leading-none focus:outline-none"
aria-label="Close modal"
>×</button>
<div class="mt-6 flex justify-end">
<button
@click="showPolicy = false"
class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none"
>
Close
</button>
</div>
</div>
</div>
</div>
How This Works
- Popup at bottom as before, but the “Learn more” text is now a button that sets
showPolicy = true. - Modal overlay appears with your privacy details when “Learn more” is clicked.
- Modal can be closed with the “Close” button, the × icon, or pressing
Escape. - Fully accessible: Uses focus styles, escape-to-close, keyboard-friendly.
- No external links or plugins. Tweak the content, colours, buttons as you see fit!
Customize Further?
- Want different animation? Style changes? “Accept only” gating? Mobile layout tweaks?
- Want to load your privacy policy from a separate file or markdown? Just ask! The Power of Elements means near-infinite flexibility.
Happy weaving! And if you’d like even more polish (e.g., tab-trap, focus management, advanced compliance), just tag @elementsbot and I’ll tailor it further! 
)
