A modal with close button built with pure HTML and CSS that provides a clear, visible control for dismissing the dialog, ensuring users can exit the modal intentionally without relying on JavaScript or external libraries.
Usage
This component is suitable for situations where user-controlled dismissal is important, such as informational popups, help dialogs, onboarding tips, or optional messages that should not block the main interface.
Implementation
The close behavior is implemented using CSS state toggling, positioning, and visibility control, placing a close icon or button within the modal frame so users can hide the dialog while keeping the layout lightweight and reusable.
HTML
<div class="ss-modal">
<div class="ss-modal-content">
<button class="close-btn">×</button>
<h3>Modal Title</h3>
<p>Modal with close button.</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{
position:relative;
background:#ffffff;
color:#111827;
padding:26px;
border-radius:12px;
width:90%;
max-width:400px;
}
.close-btn{
position:absolute;
top:12px;
right:12px;
background:none;
border:none;
font-size:22px;
cursor:pointer;
color:#6b7280;
}
.close-btn:hover{
color:#111827;
}
@media (prefers-color-scheme: dark){
.ss-modal-content{
background:#141414;
color:#e5e7eb;
}
.close-btn{
color:#9ca3af;
}
.close-btn:hover{
color:#ffffff;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Includes a dedicated close control
- Allows user-initiated dismissal
- Supports icon or text-based close buttons
- 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.