❮ Previous Next ❯

Modal Components

  • Create popup and modal UI components.

  • Modals are one of the most common UI components in modern web applications.

    They are used to:

    • Show important information

    • Confirm user actions

    • Display forms

    • Avoid page navigation

    A badly built modal:

    • Confuses users

    • Breaks accessibility

    • Feels annoying

    A well-built modal:

    • Feels focused

    • Feels intentional

    • Feels professional

    What is a Modal ? 

    A modal is a UI overlay that:

    • Appears on top of the current page

    • Temporarily blocks background interaction

    • Forces the user to focus on one task

    In simple words:

    A modal demands attention before continuing.

    Common Use Cases for Modals

    Modals are commonly used for:

    • Login / Signup

    • Delete confirmation

    • Alerts & warnings

    • Forms (Add / Edit)

    • Image previews

    • Terms & conditions

      Modal vs Page Navigation

      ModalPage
      Overlays current pageNavigates away
      Keeps contextLoses context
      Quick interactionFull workflow
      TemporaryPersistent

      Use modals for short, focused tasks.

      Basic Structure of a Modal

      A modal has three main parts:

      1. Backdrop (Overlay)

      2. Modal Container

      3. Modal Content

      Understanding this structure is critical.

    • 1. Backdrop

      The backdrop:

      • Covers the entire screen

      • Darkens background

      • Blocks interaction

    Modal Backdrop Overlay

    This backdrop covers the screen with a semi-transparent layer to block interaction and focus attention. 

    <div class="fixed inset-0 bg-black/50"></div>

    • Purpose:

      “Everything else is temporarily inactive”

      2. Modal Container

      The container:

      • Centers the modal

      • Controls width

      • Holds content

    Modal Container Centering

    This container centers the modal on the screen using flexbox alignment utilities. 

    <div class="fixed inset-0 flex items-center justify-center"></div>

    • 3. Modal Content Box

      The content box:

      • Holds text, buttons, forms

      • Is visually distinct

      • Is the main focus

    Complete Basic Modal Structure

    This example combines backdrop, centered container, and content box to create a fully functional modal layout. 

    <!-- Backdrop -->
<div class="fixed inset-0 bg-black/50"></div>

<!-- Modal Wrapper -->
<div class="fixed inset-0 flex items-center justify-center">
  <!-- Modal Box -->
  <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
    <h2 class="text-lg font-semibold mb-4">
      Modal Title
    </h2>
    <p class="text-gray-600 mb-6">
      This is a basic modal built using Tailwind CSS.
    </p>
    <div class="flex justify-end gap-2">
      <button class="px-4 py-2 text-gray-600">
        Cancel
      </button>
      <button class="px-4 py-2 bg-blue-500 text-white rounded-md">
        Confirm
      </button>
    </div>
  </div>
</div>

    • Why This Modal Works

      • Full-screen overlay blocks background

      • Centered content grabs attention

      • Clear heading & actions

      • Proper spacing & hierarchy

      This is a production-ready base modal.

      Showing & Hiding the Modal 

      In real projects, modals are:

      • Hidden by default

      • Shown using JavaScript / state

      Typical approaches:

      • Toggle hidden

      • Toggle opacity + pointer-events

      • Framework state (React / Vue)

      For now, focus on structure & styling.

    Modal Hide Using Tailwind

    This example hides the modal using the hidden class, which can be toggled with JavaScript or state. 

    <div class="hidden">
  <!-- Modal here -->
</div>

    • Modal Close Actions 

      A modal should close when:

      • User clicks “Cancel”

      • User clicks backdrop (optional)

      • User presses Esc (advanced)

      Never trap users inside a modal.

      Modal Size Guidelines

      • Small modals → confirmations

      • Medium modals → forms

      • Large modals → complex content

      Avoid:

      • Full-screen modals unless necessary

      • Overloading content inside modal

      Accessibility Basics for Modals 

      Even basic modals must:

      • Have clear focus

      • Have readable text

      • Have obvious close action

      Advanced accessibility (covered later):

      • Focus trapping

      • ARIA roles

      • Keyboard handling

    ❮ Previous Next ❯