Basic Modal

A basic modal built with pure HTML and CSS that shows content inside a simple overlay container, providing a straightforward way to present information above the main interface without relying on JavaScript or external libraries.

Usage

This component is suitable for simple overlay needs, such as displaying short messages, instructions, disclaimers, or static content that does not require animation, focus management, or complex interaction behavior.

Implementation

The modal is implemented using CSS visibility control, layering with z-index, and a background overlay, allowing the dialog box to appear above the page content while keeping the structure minimal and easy to reuse.

HTML

<div class="ss-modal">
  <div class="ss-modal-content">
    <h3>Modal Title</h3>
    <p>This is a simple modal window.</p>
  </div>
</div>

<div class="ss-modal">
  <div class="ss-modal-content">
    <h3>Modal Title</h3>
    <p>This is a simple modal window.</p>
  </div>
</div>

CSS

.ss-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ss-modal-content{
  background:#ffffff;
  color:#111827;
  padding:24px;
  max-width:360px;
  width:90%;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.ss-modal-content h3{
  margin-bottom:8px;
}

.ss-modal-content p{
  font-size:14px;
  color:#4b5563;
}

@media (prefers-color-scheme: dark){
  .ss-modal-content{
    background:#141414;
    color:#e5e7eb;
  }

  .ss-modal-content p{
    color:#9ca3af;
  }
}

.ss-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0);
  display:flex;
  align-items:center;
  justify-content:center;
}

.ss-modal-content{
  background:#ffffff;
  color:#111827;
  padding:24px;
  max-width:360px;
  width:90%;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.ss-modal-content h3{
  margin-bottom:8px;
}

.ss-modal-content p{
  font-size:14px;
  color:#4b5563;
}

@media (prefers-color-scheme: dark){
  .ss-modal-content{
    background:#141414;
    color:#e5e7eb;
  }

  .ss-modal-content p{
    color:#9ca3af;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Uses a simple overlay and container layout
• Designed for minimal interaction complexity
• Easy to extend with styles or animations
• Works in modern browsers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.