The problem
You need a modal dialog with a blurred backdrop that focuses user attention on the content.
The solution
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal-content {
background: #16213e;
border-radius: 16px;
padding: 32px;
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.9) translateY(20px);
transition: transform 0.3s ease;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.modal-overlay.active .modal-content {
transform: scale(1) translateY(0);
}
.modal-close {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
color: #888;
font-size: 24px;
cursor: pointer;
transition: color 0.2s;
}
.modal-close:hover {
color: #fff;
}See it live
Put it to work
<div class="modal-overlay" id="modal">
<div class="modal-content">
<button class="modal-close">×</button>
<h2>Modal Title</h2>
<p>Modal content goes here...</p>
<button class="btn-primary">Confirm</button>
</div>
</div>Worth knowing
Add .active class with JavaScript to show the modal. Click overlay or close button to dismiss.