Advanced Modals
Fullscreen, slide-out, nested and confirmation modals.
Confirmation Modal
Delete this project?
This action cannot be undone. All of your project data, including files and analytics, will be permanently removed.
<div class="uk-modal-box">
<div class="uk-modal-body" style="text-align:center;">
<div class="uk-modal-icon danger">
<i class="fas fa-exclamation-triangle"></i>
</div>
<h3 class="uk-modal-title">Delete this project?</h3>
<p class="uk-modal-desc">This action cannot be undone...</p>
</div>
<div class="uk-modal-footer">
<button class="uk-modal-btn ghost">Cancel</button>
<button class="uk-modal-btn danger">Delete Project</button>
</div>
</div>
<style>
.uk-modal-box {
background: #fff;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 20px 40px rgba(11, 27, 47, 0.2);
}
.uk-modal-body { padding: 2rem 1.5rem 1.5rem; }
.uk-modal-icon {
width: 56px; height: 56px;
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.uk-modal-icon.danger { background: #fee2e2; color: #dc2626; }
.uk-modal-title {
font-size: 1.15rem;
font-weight: 800;
color: #0b1b2f;
margin-bottom: 0.5rem;
}
.uk-modal-desc {
font-size: 0.85rem;
color: #64748b;
line-height: 1.6;
}
.uk-modal-footer {
display: flex;
gap: 0.5rem;
padding: 1rem 1.5rem;
background: #f8fafc;
border-top: 1px solid #e2e8f0;
}
.uk-modal-btn {
flex: 1;
padding: 0.65rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.85rem;
cursor: pointer;
}
.uk-modal-btn.ghost {
background: #fff;
color: #475569;
border: 1px solid #e2e8f0;
}
.uk-modal-btn.ghost:hover { background: #f1f5f9; }
.uk-modal-btn.danger {
background: #dc2626;
color: #fff;
border: 0;
}
.uk-modal-btn.danger:hover { background: #b91c1c; }
</style>
Form Modal
Invite team member
<div class="uk-modal-box">
<div class="uk-modal-head">
<h3 class="uk-modal-head-title">Invite team member</h3>
<button class="uk-modal-close"><i class="fas fa-times"></i></button>
</div>
<div class="uk-modal-body">
<div class="uk-modal-field">
<label>Email address</label>
<input type="email" placeholder="[email protected]">
</div>
<div class="uk-modal-field">
<label>Role</label>
<select><option>Member</option></select>
</div>
</div>
<div class="uk-modal-footer">
<button class="uk-modal-btn ghost">Cancel</button>
<button class="uk-modal-btn primary">Send Invite</button>
</div>
</div>
<style>
.uk-modal-head {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.uk-modal-head-title {
font-size: 1.05rem;
font-weight: 800;
color: #0b1b2f;
margin: 0;
}
.uk-modal-close {
width: 30px; height: 30px;
border-radius: 0.4rem;
background: transparent;
border: 0;
color: #94a3b8;
cursor: pointer;
}
.uk-modal-close:hover { background: #f1f5f9; color: #475569; }
.uk-modal-field { margin-bottom: 1rem; }
.uk-modal-field:last-child { margin-bottom: 0; }
.uk-modal-field label {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: #0b1b2f;
margin-bottom: 0.4rem;
}
.uk-modal-field input,
.uk-modal-field select,
.uk-modal-field textarea {
width: 100%;
padding: 0.65rem 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.5rem;
font-size: 0.85rem;
outline: 0;
font-family: inherit;
transition: all 0.15s;
}
.uk-modal-field input:focus,
.uk-modal-field select:focus,
.uk-modal-field textarea:focus {
border-color: #1e3a8a;
box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.08);
}
.uk-modal-btn.primary { background: #1e3a8a; color: #fff; border: 0; }
.uk-modal-btn.primary:hover { background: #0f2a5c; }
</style>
Success Modal
Payment Successful
Your order #INV-2025-042 has been confirmed. A receipt has been sent to your email.
Amount paid
$78.00
<div class="uk-modal-box">
<div class="uk-modal-body" style="text-align:center;">
<div class="uk-modal-icon success"><i class="fas fa-check"></i></div>
<h3 class="uk-modal-title">Payment Successful</h3>
<p class="uk-modal-desc">Your order has been confirmed.</p>
<div class="uk-modal-receipt">
<div class="uk-modal-receipt-row">
<span>Amount paid</span><strong>$78.00</strong>
</div>
</div>
</div>
<div class="uk-modal-footer" style="justify-content:center;">
<button class="uk-modal-btn primary">View Receipt</button>
</div>
</div>
<style>
.uk-modal-icon.success { background: #ecfdf5; color: #059669; }
.uk-modal-receipt {
background: #f8fafc;
border-radius: 0.65rem;
padding: 1rem;
margin-top: 1rem;
text-align: left;
}
.uk-modal-receipt-row {
display: flex;
justify-content: space-between;
font-size: 0.82rem;
color: #475569;
}
.uk-modal-receipt-row strong { color: #0b1b2f; }
</style>
Fullscreen Slide-Out Modal
<div class="uk-modal-slide">
<div class="uk-modal-slide-head">
<div class="uk-modal-head-title">Project Settings</div>
<button class="uk-modal-close"><i class="fas fa-times"></i></button>
</div>
<div class="uk-modal-slide-body">
<div class="uk-modal-field">...</div>
</div>
<div class="uk-modal-slide-footer">
<button class="uk-modal-btn danger">Delete</button>
<div style="flex:1;"></div>
<button class="uk-modal-btn ghost">Cancel</button>
<button class="uk-modal-btn primary">Save</button>
</div>
</div>
<style>
.uk-modal-slide {
width: 380px;
max-width: 100%;
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
border-radius: 1rem 0 0 1rem;
box-shadow: -20px 0 40px rgba(11, 27, 47, 0.15);
overflow: hidden;
}
.uk-modal-slide-head {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.uk-modal-slide-body {
flex: 1;
padding: 1.5rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.uk-modal-slide-body::-webkit-scrollbar { width: 6px; }
.uk-modal-slide-body::-webkit-scrollbar-track { background: transparent; }
.uk-modal-slide-body::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 10px;
}
.uk-modal-slide-footer {
display: flex;
gap: 0.5rem;
padding: 1rem 1.5rem;
background: #fff;
border-top: 1px solid #f1f5f9;
flex-shrink: 0;
}
.uk-modal-slide-footer .uk-modal-btn { padding: 0.5rem 1rem; }
</style>
Nested Info Modal
Upgrade to Pro
Unlock everything you need to build faster:
Unlimited projects
Advanced analytics
Priority email support
Custom domains + SSL
Team collaboration (up to 10)
$49/mo
Billed annually · Cancel anytime
<div class="uk-modal-list">
<div class="uk-modal-list-item">
<i class="fas fa-check-circle"></i> Unlimited projects
</div>
</div>
<div class="uk-modal-nested">
<div class="uk-modal-nested-icon"><i class="fas fa-tag"></i></div>
<div>
<div class="uk-modal-nested-title">$49/mo</div>
<div class="uk-modal-nested-desc">Billed annually</div>
</div>
</div>
<style>
.uk-modal-list {
background: #f8fafc;
border-radius: 0.65rem;
padding: 0.75rem 1rem;
margin-bottom: 1.25rem;
}
.uk-modal-list-item {
display: flex;
align-items: center;
gap: 0.65rem;
font-size: 0.83rem;
color: #475569;
padding: 0.4rem 0;
}
.uk-modal-list-item i { color: #059669; font-size: 0.8rem; }
.uk-modal-nested {
display: flex;
gap: 0.85rem;
align-items: center;
padding: 1rem;
border: 1.5px solid #1e3a8a;
border-radius: 0.65rem;
background: #eef2f8;
}
.uk-modal-nested-icon {
width: 36px; height: 36px;
border-radius: 0.5rem;
background: #1e3a8a;
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 0.9rem;
}
.uk-modal-nested-title {
font-size: 0.95rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-modal-nested-desc {
font-size: 0.72rem;
color: #64748b;
margin-top: 2px;
}
</style>
Announcement Modal
NEW FEATURE
Introducing Dark Mode
A long-awaited feature, now available on every plan.
We heard your feedback. Dark mode is here — pick it up in Settings → Appearance to give your eyes a break.
<div class="uk-modal-box">
<div class="uk-modal-hero">
<div class="uk-modal-hero-icon"><i class="fas fa-rocket"></i></div>
<div class="uk-modal-hero-badge">NEW FEATURE</div>
<div class="uk-modal-hero-title">Introducing Dark Mode</div>
<div class="uk-modal-hero-desc">A long-awaited feature.</div>
</div>
<div class="uk-modal-body" style="text-align:center;">
<p class="uk-modal-desc">We heard your feedback.</p>
</div>
<div class="uk-modal-footer" style="justify-content:center;">
<button class="uk-modal-btn primary">Try It Now</button>
</div>
</div>
<style>
.uk-modal-hero {
background: linear-gradient(135deg, #1e3a8a, #6366f1, #a855f7);
color: #fff;
padding: 2rem 1.5rem;
text-align: center;
}
.uk-modal-hero-icon {
width: 56px; height: 56px;
border-radius: 1rem;
background: rgba(255,255,255,0.2);
display: inline-flex; align-items: center; justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.uk-modal-hero-badge {
display: inline-block;
background: rgba(255,255,255,0.25);
padding: 3px 10px;
border-radius: 999px;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.08em;
margin-bottom: 0.75rem;
}
.uk-modal-hero-title {
font-size: 1.35rem;
font-weight: 800;
margin-bottom: 0.35rem;
}
.uk-modal-hero-desc {
font-size: 0.85rem;
opacity: 0.9;
}
</style>