Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Adobe Spectrum - Modal
Getting started
Adobe Spectrum
Spectrum UI
Pro
Components
Autocomplete
Breadcrumbs
Button
Calendar
Checkbox
Checkbox Group
Color Area
Color Field
Color Picker
Color Slider
Color Swatch
Color Swatch Picker
Color Wheel
Combo Box
Date Field
Date Picker
Date Range Picker
Dialog
Disclosure
Disclosure Group
Drop Zone
File Trigger
Form
Grid List
Group
Link
List Box
Menu
Meter
Modal
Number Field
Popover
Progress Bar
Radio Group
Range Calendar
Search Field
Select
Slider
Switch
Table
Tabs
Tag Group
Text Field
Time Field
Toast
Toggle Button
Toggle Button Group
Toolbar
Tooltip
Tree
Virtualizer
Advanced
React Aria Components
Styling
Examples</button> <button class="tab" onclick="showTab(event, 'features')">Features</button> <button class="tab" onclick="showTab(event, 'anatomy')">Anatomy</button> <button class="tab" onclick="showTab(event, 'interactions')">Interactions</button> </div> <div id="examples" class="tab-content active"> <h2>Examples</h2> <div class="example-section"> <div class="example-title">Basic Modal</div> <p>A simple modal dialog with form fields.</p> <button class="btn btn-primary" onclick="openModal('basicModal')">Sign up…</button> <div class="code-block"><button onclick="openModal('basicModal')">Sign up…</button><div class="modal-overlay" id="basicModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Sign up</h3> </div> <div class="modal-content"> <form> <div class="form-group"> <label class="form-label">First Name:</label> <input class="form-input" type="text" autofocus> </div> <div class="form-group"> <label class="form-label">Last Name:</label> <input class="form-input" type="text"> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('basicModal')">Cancel</button> <button class="btn btn-primary" onclick="submitForm()">Submit</button> </div> </div></div> </div> </div> <div class="example-section"> <div class="example-title">Dismissable Modal</div> <p>A modal that can be closed by clicking outside or pressing Escape.</p> <button class="btn btn-primary" onclick="openModal('dismissableModal')">Open dialog</button> <div class="code-block"><button onclick="openModal('dismissableModal')">Open dialog</button><div class="modal-overlay" id="dismissableModal" onclick="closeOnOutsideClick(event, 'dismissableModal')"> <div class="modal"> <div class="modal-content"> <h3>Notice</h3> <p>Click outside to close this dialog.</p> </div> </div></div> </div> </div> <div class="example-section"> <div class="example-title">Non-dismissable Modal</div> <p>A modal that requires explicit user action to close.</p> <button class="btn btn-primary" onclick="openModal('nonDismissableModal')">Open dialog</button> <div class="code-block"><button onclick="openModal('nonDismissableModal')">Open dialog</button><div class="modal-overlay" id="nonDismissableModal"> <div class="modal"> <div class="modal-content"> <h3>Notice</h3> <p>You must close this dialog using the button below.</p> <button class="btn btn-primary" onclick="closeModal('nonDismissableModal')">Close</button> </div> </div></div> </div> </div> <div class="example-section"> <div class="example-title">Custom Drawer Modal</div> <p>A side drawer implementation using modal overlay.</p> <button class="btn btn-primary" onclick="openDrawer()">Open drawer</button> <div class="code-block"><button onclick="openDrawer()">Open drawer</button><div class="drawer-overlay" id="drawerModal"> <div class="drawer"> <div class="modal-header"> <h3 class="modal-title">Settings</h3> </div> <div class="modal-content"> <p>This is a custom drawer modal.</p> <button class="btn btn-primary" onclick="closeDrawer()">Close</button> </div> </div></div> </div> </div> <div class="example-section"> <div class="example-title">Programmatic Modal</div> <p>A modal controlled programmatically with state management.</p> <button class="btn btn-primary" onclick="toggleProgrammaticModal()">Toggle Modal</button> <button class="btn btn-secondary" onclick="showNotification()">Show Notification</button> <div class="code-block">let isModalOpen = false;function toggleProgrammaticModal() { isModalOpen = !isModalOpen; if (isModalOpen) { openModal('programmaticModal'); } else { closeModal('programmaticModal'); }} </div> </div> </div> <div id="features" class="tab-content"> <h2>Features</h2> <p>The Modal component provides the following features:</p> <ul class="feature-list"> <li><strong>Styleable</strong> – States for entry and exit animations are included for easy styling. Both the underlay and overlay elements can be customized.</li> <li><strong>Accessible</strong> – Content outside the modal is hidden from assistive technologies while it is open. The modal optionally closes when interacting outside, or pressing the <span class="keyboard-key">Escape</span> key.</li> <li><strong>Focus management</strong> – Focus is moved into the modal on mount, and restored to the trigger element on unmount. While open, focus is contained within the modal.</li> <li><strong>Scroll locking</strong> – Scrolling the page behind the modal is prevented while it is open, including in mobile browsers.</li> <li><strong>Responsive</strong> – Adapts to different screen sizes and orientations.</li> <li><strong>Customizable</strong> – Supports custom animations, positioning, and styling.</li> </ul> </div> <div id="anatomy" class="tab-content"> <h2>Anatomy</h2> <p>A modal consists of several key components:</p> <div class="anatomy-diagram"> <div class="anatomy-item" data-label="Modal Overlay"> <div class="anatomy-item" data-label="Modal Container"> <div class="anatomy-item" data-label="Dialog Content"> Content </div> </div> </div> </div> <div class="code-block"><div class="modal-overlay"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Title</h3> </div> <div class="modal-content"> Content </div> <div class="modal-footer"> Actions </div> </div></div> </div> </div> <div id="interactions" class="tab-content"> <h2>Interactions</h2> <h3>Keyboard Interactions</h3> <ul> <li><span class="keyboard-key">Escape</span> – Closes the modal (if dismissable)</li> <li><span class="keyboard-key">Tab</span> – Moves focus to the next focusable element within the modal</li> <li><span class="keyboard-key">Shift + Tab</span> – Moves focus to the previous focusable element within the modal</li> </ul> <h3>Mouse Interactions</h3> <ul> <li>Click outside modal – Closes the modal (if dismissable)</li> <li>Click close button – Closes the modal</li> <li>Click trigger button – Opens the modal</li> </ul> <h3>Touch Interactions</h3> <ul> <li>Tap outside modal – Closes the modal (if dismissable)</li> <li>Tap close button – Closes the modal</li> <li>Tap trigger button – Opens the modal</li> </ul> </div> <h2>Component List</h2> <p>All interactive components demonstrated:</p> <ul> <li>Modal Overlay</li> <li>Modal Container</li> <li>Dialog</li> <li>Button (Primary, Secondary, Danger)</li> <li>Text Input</li> <li>Form Elements</li> <li>Drawer</li> <li>Notification</li> <li>Tabs</li> </ul> </div> <!-- Modal HTML --> <div class="modal-overlay" id="basicModal"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Sign up</h3> </div> <div class="modal-content"> <form> <div class="form-group"> <label class="form-label">First Name:</label> <input class="form-input" type="text" autofocus> </div> <div class="form-group"> <label class="form-label">Last Name:</label> <input class="form-input" type="text"> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-secondary" onclick="closeModal('basicModal')">Cancel</button> <button class="btn btn-primary" onclick="submitForm()">Submit</button> </div> </div> </div> <div class="modal-overlay" id="dismissableModal" onclick="closeOnOutsideClick(event, 'dismissableModal')"> <div class="modal"> <div class="modal-content"> <h3>Notice</h3> <p>Click outside to close this dialog.</p> </div> </div> </div> <div class="modal-overlay" id="nonDismissableModal"> <div class="modal"> <div class="modal-content"> <h3>Notice</h3> <p>You must close this dialog using the button below.</p> <button class="btn btn-primary" onclick="closeModal('nonDismissableModal')">Close</button> </div> </div> </div> <div class="drawer-overlay" id="drawerModal" onclick="closeOnOutsideClick(event, 'drawerModal')"> <div class="drawer"> <div class="modal-header"> <h3 class="modal-title">Settings</h3> </div> <div class="modal-content"> <p>This is a custom drawer modal with blur backdrop.</p> <div class="form-group"> <label class="form-label">Setting 1:</label> <input class="form-input" type="text" placeholder="Enter value"> </div> <div class="form-group"> <label class="form-label">Setting 2:</label> <input class="form-input" type="text" placeholder="Enter value"> </div> <button class="btn btn-primary" onclick="closeDrawer()">Close</button> </div> </div> </div> <div class="modal-overlay" id="programmaticModal" onclick="closeOnOutsideClick(event, 'programmaticModal')"> <div class="modal"> <div class="modal-content"> <h3>Programmatic Modal</h3> <p>This modal is controlled programmatically.</p> <button class="btn btn-primary" onclick="toggleProgrammaticModal()">Close</button> </div> </div> </div> <div class="notification" id="notification"> <div>Notification sent successfully!</div> </div> <script> let isModalOpen = false; let currentModal = null; function showTab(event, tabName) { const tabs = document.querySelectorAll('.tab'); const contents = document.querySelectorAll('.tab-content'); tabs.forEach(tab => tab.classList.remove('active')); contents.forEach(content => content.classList.remove('active')); event.target.classList.add('active'); document.getElementById(tabName).classList.add('active'); } function openModal(modalId) { const modal = document.getElementById(modalId); if (modal) { modal.classList.add('show'); currentModal = modalId; document.body.style.overflow = 'hidden'; // Focus management const firstInput = modal.querySelector('input, button'); if (firstInput) { setTimeout(() => firstInput.focus(), 100); } } } function closeModal(modalId) { const modal = document.getElementById(modalId); if (modal) { modal.classList.remove('show'); currentModal = null; document.body.style.overflow = ''; } } function closeOnOutsideClick(event, modalId) { if (event.target.classList.contains('modal-overlay') || event.target.classList.contains('drawer-overlay')) { closeModal(modalId); } } function openDrawer() { const drawer = document.getElementById('drawerModal'); if (drawer) { drawer.classList.add('show'); currentModal = 'drawerModal'; document.body.style.overflow = 'hidden'; } } function closeDrawer() { closeModal('drawerModal'); } function toggleProgrammaticModal() { isModalOpen = !isModalOpen; if (isModalOpen) { openModal('programmaticModal'); } else { closeModal('programmaticModal'); } } function submitForm() { showNotification(); closeModal('basicModal'); } function showNotification() { const notification = document.getElementById('notification'); notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Keyboard event handling document.addEventListener('keydown', function(event) { if (event.key === 'Escape' && currentModal) { if (currentModal !== 'nonDismissableModal') { closeModal(currentModal); } } // Tab trapping within modal if (event.key === 'Tab' && currentModal) { const modal = document.getElementById(currentModal); const focusableElements = modal.querySelectorAll('button, input, select, textarea, [tabindex]:not([tabindex="-1"])'); const firstElement = focusableElements[0]; const lastElement = focusableElements[focusableElements.length - 1]; if (event.shiftKey) { if (document.activeElement === firstElement) { event.preventDefault(); lastElement.focus(); } } else { if (document.activeElement === lastElement) { event.preventDefault(); firstElement.focus(); } } } }); // Keyboard shortcut for command palette (press '/') document.addEventListener('keydown', function(event) { if (event.key === '/' && !currentModal) { event.preventDefault(); openModal('programmaticModal'); } }); // Prevent scrolling when modal is open document.addEventListener('wheel', function(event) { if (currentModal) { const modal = document.getElementById(currentModal); if (modal && !modal.contains(event.target)) { event.preventDefault(); } } }, { passive: false }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">