Modal

What Makes RSL Modals Special

RSL Modals are fully dynamic—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. You can open modals using simple HTML data attributes, DOM-sourced content, or pure JavaScript.

5-Minute Setup

1 Include Files (Add to `<head>`)

2 Include JavaScript (Add before `</body>`)

3 Create a Modal Container



    
        
            Modal Title

4 Open Modal with Data Attributes

✓ Done! Your modal is now functional with keyboard navigation, focus trapping, and screen reader support.

5 Modal Patterns

1. Hardcoded Static Modal

Content is written directly in HTML—ideal for simple, unchanging layouts





    
        
            Hardcoded Modal
            
        
        
            Static content lives here in the HTML

2. Content from Data Attributes

Pass title, body, and footer content through data-* attributes

3. Content from DOM Elements

Pull content from hidden elements on the page using a selector




    Content from DOM element 1


    Content from DOM element 2

4. JavaScript-Powered Modal

Full programmatic control using RSL.showModal()


document.querySelector('#openBtn').addEventListener('click', () => {
    RSL.showModal({
        target: '#my-modal',
        title: 'JavaScript Modal',
        body: 'Built entirely in code',
        footer: "",
        animationIn: 'scaleIn'
    });
});

5. JavaScript with DOM Selector

Combine JavaScript control with DOM-sourced content


RSL.showModal({
    target: '#my-modal',
    title: 'Details',
    bodySelector: '.content-block', // pulls innerHTML from all .content-block elements
    footer: "",
    animationIn: 'fadeIn'
});

Quick Reference

Data Attributes (for Triggers)

Attribute	Purpose	Example
`data-modal-target`	CSS selector for modal to open	`"#my-modal"`
`data-animation-in`	Opening animation name	`"fadeIn"`, `"scaleIn"`, `"rotateIn"`
`data-modal-title`	HTML for modal title	`"<h2>Title</h2>"`
`data-modal-body`	Array of HTML strings for body	`'["<p>Text</p>"]'`
`data-modal-body-selector`	CSS selector to pull content from DOM	`".content-chunk"`
`data-modal-footer`	HTML for modal footer	`"<button>OK</button>"`

Data Attributes (for Close Buttons)

Attribute	Purpose	Example
`data-animation-out`	Closing animation name	`"fadeOut"`, `"rotateOut"`

CSS Classes

Class	Purpose
`.modal-container`	Outer modal wrapper
`.modal`	Inner modal content box
`.modal-header`	Header section
`.modal-body`	Content section
`.modal-footer`	Footer section
`.close-modal`	Close button styling and behavior
`.default-modal-size`	Standard modal width
`.modal-buttons-right`	Right-align footer buttons
`.modal-buttons-center`	Center-align footer buttons

JavaScript Methods

Method	Purpose
`RSL.openFromTrigger(element)`	Opens modal using data attributes from trigger element
`RSL.showModal(options)`	Opens modal programmatically with JavaScript options

How It Works

The Modal Mechanism:

User clicks a trigger button or calls RSL.showModal()
JavaScript injects title, body, and footer content into the modal container
Modal container receives animation class and is displayed
Focus moves to the first focusable element; Tab/Shift+Tab are trapped inside
Clicking the overlay or close button triggers the exit animation
After animation, modal is hidden and focus returns to the trigger

⚠ Security Note: All modal content is sanitized using DOMPurify to prevent XSS attacks. Always include DOMPurify before modal.js.

Pro Tips

✨ Tip 1: Reuse the same modal container for different content—just change the data attributes on each trigger

✨ Tip 2: Use data-modal-body-selector to pull content from server-rendered HTML hidden on the page

✨ Tip 3: Combine animations—use data-animation-in="scaleIn" with data-animation-out="fadeOut" for variety

✨ Tip 4: Always provide aria-label on close buttons for screen reader users

✨ Tip 5: Use RSL grid layouts inside .modal-body for complex, responsive modal content

Troubleshooting

Modal Won't Open?

Check: modal.js is loaded after layout.js and DOMPurify
Check: data-modal-target selector matches a modal container ID
Check: Modal container has role="dialog" and aria-modal="true"

Content Not Showing?

Check: JSON array syntax in data-modal-body is valid
Check: data-modal-body-selector matches existing elements
Check: DOMPurify is loaded (content is sanitized before insertion)

Focus Not Trapped?

Ensure: Modal has at least one focusable element (button, link, input)
Ensure: aria-modal="true" is set on the container

ADA Compliance Built-In

RSL Modals are ADA-compliant by default:

✅ role="dialog" and aria-modal="true" for screen reader announcements
✅ Focus trapped inside modal with Tab/Shift+Tab navigation
✅ Esc key closes the modal
✅ Focus returns to trigger element after closing
✅ Background interaction blocked while modal is open
✅ All content sanitized for security

Next Steps

See It In Action

Open modal.html for live examples

Advanced Design

Check the cart modal example for custom styling ideas

Mix Patterns

Combine data attributes, DOM content, and JavaScript for powerful workflows