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

Playback speed

Share post at current time

Share from 0:00

0:00

Transcript

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

Norbert B.M.

Apr 29, 2025

Transcript

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.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Message Modal</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
  <!-- Modal and button go here -->
  <script src="script.js" defer></script>
</body>
</html>

Step 2: Build the Modal Structure (HTML)

Create the modal structure inside the <body>. Initially, the modal should be hidden.

<!-- Message Button -->
<button id="message-button" class="bg-blue-600 text-white p-2 rounded hover:bg-blue-700">
  Open Message Modal
</button>

<!-- Modal -->
<div id="modal" class="fixed inset-0 flex items-center justify-center bg-gray-900 bg-opacity-50 hidden">
  <div class="bg-white rounded-lg p-6 w-96 dark:bg-gray-800">
    <h2 class="text-xl font-bold text-gray-800 dark:text-white">Send a Message</h2>
    <textarea id="modal-input" class="mt-4 w-full h-32 border rounded p-2" placeholder="Type your message here..."></textarea>
    <div class="flex justify-center gap-4 mt-4">
      <button id="send-button" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Send</button>
      <button id="close-button" class="bg-gray-400 text-white px-4 py-2 rounded hover:bg-gray-500">Cancel</button>
    </div>
  </div>
</div>

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
});