Evrig

+1 512-5822-377

Get in Touch

How to create Modal popup with tailwind and Alpine JS

  • January 17, 2025
  • Categories: Hyva, Magento 2
No Comments

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.

By the end of this tutorial, you’ll have a modal popup that’s ready to use and fully adaptable to your project’s needs.

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:

Copy Code 


<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 directory

Copy Code 


bin/magento cache:clean

Run this in your theme

Copy Code 


npm run build-prod

Folder

Copy Code 


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.

Start Creating Interactive User Experiences Today

With just a few lines of code, you can integrate an elegant and responsive modal popup into your Hyva Magento 2 project. Whether you’re delivering important updates, collecting user feedback, or showcasing promotional content, this modal popup offers a clean and efficient solution.

Ready to elevate your website’s user experience?
Follow this guide and implement your own modal popup today!

If you need assistance or have any questions, feel free to contact us. We’d love to help you bring your project to life.

Contact Us