Adding a modal popup to your website is a great way to enhance user experience by delivering information in a focused and interactive way. In this tutorial, we’ll show you how to create a simple yet fully functional modal popup using Tailwind CSS and Alpine JS in the Hyva Magento 2 environment.
This guide is perfect for developers looking to:
- Implement lightweight modals without external JS or CSS libraries.
- Ensure the modal is responsive and looks great across all devices.
- Keep the implementation simple, clean, and customizable.
Step 1: Add the Code
The following code snippet creates a basic modal popup. You can add it to your PHTML file, CMS block, or CMS page as per your project requirements:<div x-data="{ open: false }">
<div class="cursor-pointer text-center" @click="open = true">Open Modal</div>
<div class="fixed top-0 left-0 w-full h-full flex items-center justify-center z-30 bg-black bg-opacity-50 transition-all" x-show="open" x-cloak>
<div class="bg-white w-11/12 relative h-auto p-4 md:max-w-xl md:p-6 lg:p-8 shadow-xl rounded mx-2 md:mx-0" @click.away="open = false">
<div class="absolute top-2 right-2">
<button class="px-4 py-2 rounded no-outline focus:shadow-outline select-none" @click="open = false">
<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</button>
</div>
<h3 class="text-2xl mb-3">Modal Title</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>
Step 2: Build and Deploy
Run this command in your root directorybin/magento cache:cleanRun this in your theme
npm run build-prodFolder
app/design/frontend/Vendor/default/web/tailwind/
Advantages to adding the Modal popup with Tailwind CSS and Alpine JS:
- Achieve this without adding any external JS/CSS.
- Minimal use of Tailwind classes and Alpine JS.
- Customizable: You can change the design to meet your requirements.
- Responsive: This code adapts its layout to different screen sizes, ensuring your code looks great on all devices.