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.
Message Modal
Step 2: Build the Modal Structure (HTML)
Create the modal structure inside the . Initially, the modal should be hidden.
Open Message Modal
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
