A context lock modal built with pure HTML and CSS that pauses interaction with the underlying interface and requires the user to respond before continuing, ensuring uninterrupted task focus without relying on JavaScript or external libraries.
Usage
This component is suited for moments where interface flow must be temporarily halted, such as mandatory acknowledgements, security prompts, irreversible actions, or steps that must be completed before proceeding to the next screen.
Implementation
The locking behavior is implemented using full-screen overlay layers, fixed positioning, and controlled visibility states, allowing the modal to capture all pointer interaction while visually preserving the background layout.
HTML
<div class="modal-lock">
<h4>Confirm action</h4>
<button>Confirm</button>
</div>CSS
.modal-lock {
width: 200px;
padding: 0.8rem;
border-radius: 18px;
background: #ffffff;
color: #000000;
box-shadow: 0 30px 60px rgba(0,0,0,0.8);
text-align: center;
}
.modal-lock h4 {
font-size: 14px;
margin-bottom: 0.5rem;
}
.modal-lock button {
padding: 0.45rem;
border-radius: 999px;
border: none;
background: #6366f1;
color: #ffffff;
font-size: 12px;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Halts background interaction completely
- Forces user response before continuing
- Maintains visual awareness of previous context
- Designed for critical or blocking actions
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.