How to Make A Pop-Up Window With Tailwind CSS?

Last Updated : 04 Sep, 2024

A pop-up window is a small box that appears on your webpage, showing extra information or options without leaving the current page. A pop-up window for a website should be interactive, simple & good in UI. we will learn how to make a pop-up window with HTML & Tailwind CSS and simple JavaScript.

Prerequisites

Table of Content

Using classes of Tailwind through JS
Using only CSS + Tailwind classes

Using classes of Tailwind through JS

Create a basic structure of a container in the centre and a button in the centre.
Create two buttons, one to open the popup window and the other one to close the popup window.
Create another button centred in the middle of the page with text to show the model when you click.
Now add the tailwind classes to align the elements at their proper positions & create a script tag above the body tag.
In the script tag, add event listeners and change, or add and remove their classlists when the target elements are clicked.

Example: Below is the example demonstrating the Tailwind classes through JS by adding JS code in <script> tag.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0" />
    <title>Popup Window</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        * {
            font-family: Poppins;
        }
    </style>
</head>

<body class="flex items-center justify-center 
             h-screen bg-gray-400">
    <button id="open-modal-btn"
        class="px-6 py-3 bg-white text-teal-600 rounded-lg
               shadow-lg hover:bg-blue-200 transition-all
               transform active:scale-95 text-xl delay-75 
               font-bold">
        Show Modal
    </button>

    <div id="modal" class="fixed flex items-center 
                           justify-center">
        <div
            class="bg-white p-8 rounded-lg shadow-lg w-full
                   max-w-md transform scale-90 
                   transition-transform duration-300">
            <h2 class="text-3xl text-center font-semibold 
                       text-blue-800 mb-4">
                Popup Window
            </h2>
            <p class="text-green-600 text-lg text-justify mb-6">
                GeeksforGeeks is a popular online platform 
              dedicated to computer science and programming.
              	It offers a wealth of resources tailored for
                learners of all levels, from beginners to 
              	advanced developers. Whether you're interested
              	in mastering algorithms, diving into data
                structures, or preparing for coding interviews,
              GeeksforGeeks has you	covered.
            </p>
            <button id="close-modal-btn"
             class="px-4 py-2 bg-red-600 w-full text-white
                    rounded-lg shadow-md hover:bg-red-700
             transition-transform transform active:scale-95">
                Close
            </button>
        </div>
    </div>

    <script>
        const openModalBtn = 
         document.getElementById("open-modal-btn");
        const closeModalBtn = 
         document.getElementById("close-modal-btn");
        const modal = document.getElementById("modal");

        openModalBtn.addEventListener("click", () => {
            modal.classList.remove("hidden");
        });

        closeModalBtn.addEventListener("click", () => {
            modal.classList.add("hidden");
        });
    </script>
</body>

</html>

Using only CSS + Tailwind classes

In the second approach, we will not be using any Javascript, instead we will use pseudo selectors only.
Here, we have used target as the pseudo selector. Target is a CSS element that is used to create interactions with classes which otherwise we would have been using Javascript to do the same.
We have used target for the container and this will enable us to select the target element, that is current element which is being clicked.
When the container is targetted, it's display becomes flex and all the elements such as content and button are now visible.
When the container is targetted again, this time it's class within it, that is, content class adds itself a property of transform scale. This increases the size of the box which is to be shown with the content and close button.
Finally, when the close button is pressed, it returns back to the page since a href tag takes it back through "#" symbol.

Example: Below is the example demonstrating Tailwing classes use along with CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport"
          content="width=device-width,
                   initial-scale=1.0" />
	<title>Tailwind Modal with :target</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<style>
		* {
			font-family: Poppins;
		}

		.container {
			display: none;
			position: fixed;
			inset: 0;
			justify-content: center;
			align-items: center;
			transition: opacity 0.3s ease;
		}

		.container:target {
			display: flex;
		}

		.content {
			background-color: white;
			padding: 20px;
			border-radius: 8px;
			width: 90%;
			max-width: 400px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
			transform: scale(0.9);
			transition: transform 0.3s ease;
		}

		.container:target .content {
			transform: scale(1);
		}
	</style>
</head>

<body class="flex items-center justify-center h-screen
             bg-gray-400">
	<a href="#modal"
		class="px-6 py-3 g-white text-teal-600 bg-white
               rounded-lg shadow-lg hover:bg-blue-200
               transition-all transform active:scale-95
               text-xl delay-75 font-bold">
		Show Modal
	</a>

	<div id="modal" class="container">
		<div class="content">
			<h2 class="text-3xl text-center font-semibold
                       text-blue-800 mb-4">
				Popup Window
			</h2>
			<p class="text-green-600 text-lg text-justify mb-6">
				GeeksforGeeks is a popular online platform
              dedicated to computer science and programming.
              	It offers a wealth of resources tailored for
				learners of all levels, from beginners to
              	advanced developers. Whether you're interested
              	in mastering algorithms, diving into data
				structures, or preparing for coding interviews,
              	GeeksforGeeks has you covered.
			</p>
			<a href="#"
				class="px-4 py-2 bg-red-600 text-white rounded-lg
                       shadow-md hover:bg-red-700
                      transition-transform transform active:scale-95
                       w-full text-center block">
				Close
			</a>
		</div>
	</div>
</body>

</html>

Output:

How to set Background Image with opacity in Tailwind CSS?

riyarjha

Improve

Article Tags :

How to Make A Pop-Up Window With Tailwind CSS?

Prerequisites

These are the approaches to make a Pop-Up Window with Tailwind CSS:

Using classes of Tailwind through JS

Using only CSS + Tailwind classes

Similar Reads

Thank You!

What kind of Experience do you want to share?