Modals
The Responsive Slot Layout includes a flexible, fully-dynamic modal system designed to work in multiple ways depending on your needs. Modals can be opened using simple HTML data attributes, DOM-sourced content, or pure JavaScript. Content is never fixed—every modal can be populated on demand at the moment it opens, allowing you to reuse the same modal container for countless layouts.
This page demonstrates several ways to work with the modal system:
- Hard-coded modal example – a basic modal with static content.
- HTML data-attribute example – content is passed directly through data-modal-* attributes.
- DOM-content example – the trigger pulls content from hidden elements in the page.
- JavaScript-assisted DOM example – JS collects page content and injects it into the modal.
- Full JavaScript example – JS builds the modal’s title, body, and footer entirely in code.
- Modal container markup – the base HTML structure used by every dynamic modal.
Each section explains how the approach works and when you would use it, providing both the trigger code and the modal output.
Hard Coded Modal
This example shows a fully static modal where all content—header, body, and footer—is written directly in the HTML. Because nothing is generated dynamically, the modal opens exactly as it appears in the markup. This approach is ideal for simple layouts, demos, or situations where the modal’s content never changes. It uses the standard data-open-from attribute to connect the trigger button to the modal, along with built-in animation options for smooth opening and closing effects.
Hardcoded HTML Modal
Left
Middle
Right
One
Two
Three
Code
Hardcoded Modal
Left
Middle
Right
One
Two
Three
HTML
These examples show the two pieces required for dynamic modals in the Responsive Slot Layout system. On the left are the modal containers themselves—empty shells that provide the structure, ARIA roles, and close buttons for each modal instance. On the right is an example of HTML content sourced from the page and injected into a modal at runtime. This separation lets you keep your modal markup lightweight while dynamically loading titles, body content, or entire slot-layout sections from elsewhere in the DOM using data attributes or JavaScript.
Modal Containers
Code
Modal A
Modal B
Hidden HTML on page for dynamic modal content
Code
B1 from DOM
B2 from DOM
Modal A
Modal B
B1 from DOM
B2 from DOM
HTML-Driven Modal (Content from Data Attributes)
- This button opens a modal using RSL.openFromTrigger(this), making the trigger fully JS-powered.
- All modal content—title, body, and footer—is provided through simple
data-*attributes. - data-modal-target points to the modal container to open.
- data-modal-body accepts an array of HTML strings that become the modal’s body content.
- data-animation-in and data-modal-footer control opening animation and footer button layout.
- Great for dynamic modals when you want flexibility without writing extra JS per modal.
Code
Modal from JavaScript (Programmatic Control)
- Use RSL.showModal() when you need to open a modal directly from JS instead of using HTML data attributes.
- This method lets you set the title, body, and footer dynamically at runtime.
- Perfect for modals triggered by custom logic—AJAX responses, form validation, button handlers, or app-wide events.
- The
targetproperty tells RSL which modal container to open. - No HTML attributes required on the trigger—everything is controlled from JavaScript.
Code
Code
document.querySelector('#jsOpenA').addEventListener('click', () => {
RSL.showModal({
target: '#open-modal-a',
title: 'Hello
',
body: 'Single paragraph body
',
footer: ""
});
});
Modal Loading Content from the DOM
- This modal uses data-modal-body-selector to pull HTML directly from hidden elements on the page.
- Any elements matching the selector (e.g.,
.modal-b-chunk) will have their innerHTML extracted and inserted into the modal body. - This keeps your modal markup clean and lets you reuse content stored elsewhere in the DOM.
- Ideal for templated content, repeatable sections, or data generated by server-side rendering.
- The modal still opens using
RSL.openFromTrigger(this), just like the data-attribute example.
Code
JavaScript-Driven Modal Loading DOM Content
- This example opens the modal entirely through JavaScript, without relying on data attributes.
- The
bodySelectoroption tells the modal to pull content from matching DOM elements (e.g.,.modal-b-chunk). - All matched elements have their innerHTML collected and inserted into the modal body automatically.
- This approach is ideal when JavaScript already controls the flow — such as conditional rendering, API results, or complex UI logic.
- Everything is configured via
RSL.showModal(), making the modal fully script-controlled.
Code
Code
document.querySelector('#jsOpenB').addEventListener('click', () => {
RSL.showModal({
target: '#open-modal-b',
title: 'Details
',
bodySelector: '.modal-b-chunk', // pulls all matching elements’ innerHTML
footer: "",
animationIn: 'fadeIn',
trigger: null
});
});
Advanced Design Modal
Code
Your cart
3 items · Free shipping at $150
Midnight Dashboard UI Kit
$49.00
Responsive Slot Layout Pro
$79.00
Accessibility Helper Add-on
$39.00
Subtotal
$167.00
VAT (estimated)
$0.00
You’ve unlocked free shipping 🎉
$150+ order value
All digital items are delivered instantly. You’ll receive a receipt and download links by email.
Code
/* Overall modal sizing tweak for this design */
.cart-modal .modal {
width: min(100% - 2rem, 760px);
max-height: min(90vh, 680px);
border-radius: 18px;
padding: 0;
background: #0b1120; /* deep navy */
color: #e5e7eb;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.9);
}
/* On very small screens, let it breathe edge-to-edge */
@media (max-width: 640px) {
.cart-modal .modal {
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
}
}
/* Header */
.cart-modal-header {
padding: 18px 22px;
border-bottom: 1px solid rgba(148, 163, 184, 0.25);
background: radial-gradient(circle at top left, #38bdf8 0, #4f46e5 40%, #020617 100%);
}
.cart-title-wrap {
display: flex;
align-items: center;
gap: 14px;
}
.cart-icon-pill {
width: 40px;
height: 40px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(15, 23, 42, 0.65);
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
}
.cart-heading {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #f9fafb;
}
.cart-subtitle {
margin: 2px 0 0;
font-size: 13px;
color: #cbd5f5;
}
.cart-close-btn {
color: #e5e7eb;
font-size: 26px;
}
/* Trigger */
.cart-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 999px;
padding-inline: 16px;
}
.cart-count-pill {
background: rgba(15, 23, 42, 0.9);
color: #e0f2fe;
font-size: 12px;
padding: 2px 9px;
border-radius: 999px;
}
/* Body */
.cart-modal-body {
padding: 18px 22px 10px;
display: grid;
gap: 18px;
}
/* Items list */
.cart-items {
gap: 10px;
}
.cart-item {
background: rgba(15, 23, 42, 0.75);
border-radius: 12px;
padding: 12px 14px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border: 1px solid rgba(148, 163, 184, 0.28);
}
.cart-item-main {
display: flex;
align-items: flex-start;
gap: 10px;
}
.cart-thumb-wrap {
flex-shrink: 0;
width: 64px;
height: 64px;
border-radius: 10px;
overflow: hidden;
background: #020617;
}
.cart-thumb {
width: 100%;
height: 100%;
object-fit: cover;
}
.cart-item-content {
min-width: 0;
}
.cart-item-title {
margin: 0 0 2px;
font-size: 14px;
font-weight: 600;
color: #e5e7eb;
}
.cart-item-meta {
margin: 0 0 8px;
font-size: 12px;
color: #9ca3af;
}
.cart-item-controls {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
.cart-qty-label {
font-size: 12px;
color: #9ca3af;
display: inline-flex;
align-items: center;
gap: 6px;
}
.cart-qty-input {
width: 52px;
padding: 3px 6px;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
background: #020617;
color: #e5e7eb;
font-size: 12px;
}
.cart-qty-input:focus {
outline: none;
box-shadow: 0 0 0 1px #38bdf8;
border-color: #38bdf8;
}
.cart-link {
padding: 0;
border: none;
background: transparent;
color: #38bdf8;
font-size: 12px;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.cart-link:hover {
color: #7dd3fc;
}
.cart-item-price {
font-weight: 600;
font-size: 14px;
color: #f9fafb;
}
/* On narrow screens, stack price under item */
@media (max-width: 520px) {
.cart-item {
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
}
.cart-item-price {
justify-self: flex-end;
}
}
/* Summary section */
.cart-summary {
margin-top: 6px;
padding-top: 10px;
border-top: 1px dashed rgba(148, 163, 184, 0.35);
display: grid;
gap: 10px;
}
.summary-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #e5e7eb;
}
.summary-row-muted {
color: #9ca3af;
}
.summary-progress {
display: grid;
gap: 6px;
margin-top: 4px;
}
.summary-progress-text {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #e0f2fe;
}
.summary-progress-text span:last-child {
color: #9ca3af;
}
.summary-progress-bar {
position: relative;
height: 6px;
border-radius: 999px;
background: rgba(30, 64, 175, 0.7);
overflow: hidden;
}
.summary-progress-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #38bdf8, #a855f7);
}
.summary-note {
font-size: 12px;
color: #9ca3af;
}
/* Footer buttons */
.cart-modal-footer {
padding: 14px 22px 18px;
border-top: 1px solid rgba(15, 23, 42, 0.9);
background: radial-gradient(circle at top, rgba(148, 163, 184, 0.25), #020617);
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Button skins (minimal) */
.btn-primary {
background: linear-gradient(135deg, #38bdf8, #4f46e5);
border: none;
color: #f9fafb;
border-radius: 999px;
padding: 8px 18px;
font-weight: 600;
font-size: 14px;
}
.btn-primary:hover {
filter: brightness(1.05);
}
.btn-ghost {
background: transparent;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.7);
color: #e5e7eb;
padding: 8px 14px;
font-size: 14px;
}
.btn-ghost:hover {
background: rgba(15, 23, 42, 0.6);
}
♿ Accessibility Notes – Modals
- Each modal uses
role="dialog"andaria-modal="true", and JS builds anaria-labelfrom the modal’s content so screen readers get a clear “dialog open” announcement. - When a modal opens, focus is moved to the first focusable element inside it, and Tab / Shift+Tab are trapped inside the dialog so keyboard users can’t accidentally tab out behind it.
- The close button is fully keyboard-accessible and labeled with
aria-label="Close"; clicking the overlay also closes the dialog while returning focus to the trigger (or slider indicator when used in carousels). - Buttons and links inside the modal follow normal tab order, so keyboard users can step through header, body content, and footer actions in sequence.
- While the modal is open, the page body is visually dimmed and interaction with the background is blocked, reducing confusion for screen readers and keyboard-only users.