<div id="myModal" class="modal-overlay">
<div class="modal-box">
<span class="close-icon" onclick="closeModal()">×</span>
<h2>Confirmation</h2>
<p>Are you sure you want to proceed with this action? This cannot be undone.</p>
<div class="modal-actions">
<button class="btn-cancel" onclick="closeModal()">Cancel</button>
<button class="btn-confirm">Confirm</button>
</div>
</div>
</div>
<button onclick="openModal()">Open Modal</button>.modal-overlay {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
display: none;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
transition: opacity 0.3s ease;
}
.modal-overlay.show {
display: flex;
opacity: 1;
}
.modal-box {
background: white;
padding: 30px;
border-radius: 16px;
width: 90%;
max-width: 400px;
box-shadow: 0 20px 50px rgba(0,0,0,0.1);
transform: scale(0.9);
transition: transform 0.3s ease;
position: relative;
}
.modal-overlay.show .modal-box {
transform: scale(1);
}
.modal-box h2 {
margin-top: 0;
color: #111827;
}
.modal-box p {
color: #6b7280;
line-height: 1.5;
margin-bottom: 25px;
}
.close-icon {
position: absolute;
top: 15px;
right: 20px;
font-size: 1.5rem;
cursor: pointer;
color: #9ca3af;
}
.modal-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.modal-actions button {
padding: 10px 20px;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: 600;
}
.btn-cancel {
background: #f3f4f6;
color: #374151;
}
.btn-confirm {
background: #ef4444;
color: white;
}function openModal() {
const modal = document.getElementById("myModal");
modal.classList.add("show");
}
function closeModal() {
const modal = document.getElementById("myModal");
modal.classList.remove("show");
}Nothing to show yetType HTML, CSS or JavaScript and your page appears here.
Click any element to find its code Esc
Check this code before you run it
It came from a shared link. It runs with fewer permissions, so it cannot open pop-ups, submit forms or start downloads.
0.00s / 0.00s
Nothing has animated yet. Hover, click or type in the preview and each CSS animation, transition or
element.animate() call shows up here as it plays.