Create a Message Pop-Up Modal with JavaScript and Tailwind CSS

In this project, we will build a message pop-up modal using JavaScript and Tailwind CSS. This project is part of my "Learn Web Development From the Beginning" series, where we progressively create real-world projects with HTML, CSS, JavaScript, and Tailwind.

🔥 Become a channel member and get full access to all my web development courses: https://www.youtube.com/playlist?list=UUMOx8iaEliW-CFrS0t9KHisTw

📚GET ULTIMATE COURSES BUNDLES: https://norbert-bm-s-school.teachable.com/

You’ll learn how to:

* Create a hidden modal

* Toggle modal visibility with JavaScript

* Send and validate a message input

* Close the modal when clicking outside or on a cancel button

Step 1: Set Up the Basic Project Structure

* Create a new folder for your project.

* Inside, create:

* index.html

* style.css (optional if you want custom styles)

* script.js

* Link TailwindCSS via CDN in your HTML file.

Step 2: Build the Modal Structure (HTML)

Create the modal structure inside the . Initially, the modal should be hidden.

Send a Message

Step 3: Handle the Modal with JavaScript

In script.js, write the logic to open, close, and send messages.

// Select Elements const modal = document.getElementById('modal'); const messageButton = document.getElementById('message-button'); const sendButton = document.getElementById('send-button'); const closeButton = document.getElementById('close-button'); const messageInput = document.getElementById('modal-input'); // Toggle Modal Visibility function toggleModal() { modal.classList.toggle('hidden'); } // Open Modal messageButton.addEventListener('click', toggleModal); // Close Modal on Cancel closeButton.addEventListener('click', toggleModal); // Close Modal When Clicking Outside modal.addEventListener('click', function (event) { if (event.target === modal) { toggleModal(); } }); // Send Message sendButton.addEventListener('click', function () { if (messageInput.value.trim() === '') { alert('Please enter a message.'); return; } alert(`Message sent: ${messageInput.value}`); messageInput.value = ''; // Clear input toggleModal(); // Close modal });

Step 4: (Optional) Enable Dark Mode Toggle

Add a dark mode toggle button if you want to enable Tailwind’s dark mode classes dynamically.

Final Result

* Click the "Open Message Modal" button ➔ Modal opens.

* Type a message and click Send ➔ Shows an alert and closes the modal.

* Click Cancel or click outside the modal ➔ Closes the modal.

Congratulations! 🎉 You now have a fully functioning, stylish message modal!

Complete Source Code: https://github.com/NorbertBM/learn-web-development-for-beginners-.git

Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe