How to create modal in css

CssHow-ToBeginner · 3 min read

How to Create a Modal in CSS: Simple Steps and Example

To create a modal in CSS, use a hidden container with position: fixed to cover the screen and display: none to hide it initially. Show the modal by changing display to flex or block and center it using Flexbox or Grid.

📐

Syntax

A modal typically uses a container with position: fixed to cover the entire viewport. Use display: none to hide it by default. When active, change display to flex or block to show it. Center the modal content with Flexbox properties like justify-content and align-items.

position: fixed; - keeps modal fixed on screen
top: 0; left: 0; width: 100vw; height: 100vh; - covers full screen
background-color: rgba(0,0,0,0.5); - adds a dark transparent overlay
display: none; - hides modal initially
display: flex; - shows modal and enables centering

css

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none; /* hidden by default */
  justify-content: center;
  align-items: center;
}

.modal.active {
  display: flex; /* show modal */
}

.modal-content {
  background: white;
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

💻

Example

This example shows a modal that appears when you click the "Open Modal" button and disappears when you click the close button inside the modal. It uses only HTML and CSS with a checkbox hack to toggle visibility.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CSS Modal Example</title>
<style>
  body {
    font-family: Arial, sans-serif;
  }
  /* Hide the checkbox */
  #modal-toggle {
    display: none;
  }
  /* Modal container hidden by default */
  .modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
  }
  /* Show modal when checkbox is checked */
  #modal-toggle:checked + .modal {
    display: flex;
  }
  .modal-content {
    background: white;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    position: relative;
  }
  .close-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
  }
  button.open-btn {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    cursor: pointer;
  }
</style>
</head>
<body>

<label for="modal-toggle" class="open-btn">Open Modal</label>
<input type="checkbox" id="modal-toggle" />

<div class="modal">
  <div class="modal-content" role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <button class="close-btn" aria-label="Close modal" onclick="document.getElementById('modal-toggle').checked = false;">&times;</button>
    <h2 id="modal-title">Modal Title</h2>
    <p>This is a simple modal created with CSS and a little HTML.</p>
  </div>
</div>

</body>
</html>

Output

A webpage with a button labeled 'Open Modal'. Clicking it shows a centered white box with a title, text, and a close (×) button on a dark transparent background. Clicking the close button hides the modal.

⚠️

Common Pitfalls

Common mistakes when creating CSS modals include:

Not using position: fixed, which causes the modal to scroll with the page.
Forgetting to cover the entire viewport with width: 100vw and height: 100vh.
Not hiding the modal initially with display: none, causing it to show on page load.
Not centering the modal content, making it appear awkwardly placed.
Missing accessibility attributes like aria-modal and keyboard focus management (advanced topic).

Example of a wrong and right way:

css

/* Wrong: modal scrolls with page and is visible by default */
.modal {
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  display: block;
  width: 300px;
  height: 200px;
}

/* Right: modal fixed, covers screen, hidden initially, centered */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.5);
  display: none;
  justify-content: center;
  align-items: center;
}
.modal.active {
  display: flex;
}

📊

Quick Reference

Hide modal: display: none;
Show modal: display: flex; with justify-content and align-items to center
Cover screen: position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
Overlay color: Use rgba(0,0,0,0.5) for transparent black background
Modal box: White background, padding, border-radius, and shadow for clarity

✅

Key Takeaways

Use position fixed and full viewport size to cover the screen with the modal background.

Hide the modal by default with display none and show it by changing display to flex or block.

Center modal content using Flexbox properties justify-content and align-items.

Add a semi-transparent background color for the overlay effect.

Remember accessibility attributes and keyboard controls for better user experience.