Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Grafana Saga - modal
Getting started
Grafana Saga
Grafana UI
Pro
Components
Alert
Badge
Card
Checkbox
Components Status
Field
File Dropzone
Filter Pill
Inline Field
Input
Interactive Table
Modal
Pagination
Plugin Signature
Radio Button
Radio Button Group
Select
Switch
Text
Text Link
Textarea
Toggletip
Tooltip
Open Basic Modal</button> <div id="basicModal" class="modal-overlay" onclick="closeModalOnBackdrop(event, 'basicModal')"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Basic Modal</h3> <button class="modal-close" onclick="closeModal('basicModal')">×</button> </div> <div class="modal-content"> <p>This is a basic modal with default styling and behavior. It demonstrates the standard modal pattern used in Grafana applications.</p> <p>The modal traps focus and can be closed by clicking the X button, pressing Escape, or clicking outside the modal.</p> </div> <div class="modal-actions"> <button class="btn-secondary" onclick="closeModal('basicModal')">Cancel</button> <button class="btn-primary" onclick="closeModal('basicModal')">Confirm</button> </div> </div> </div> </div> <div class="demo-section"> <h3>2. Modal with Custom Content Class</h3> <p>In this case the modal content has applied a specific class.</p> <button class="modal-trigger" onclick="openModal('customModal')">Open Custom Modal</button> <div id="customModal" class="modal-overlay" onclick="closeModalOnBackdrop(event, 'customModal')"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Custom Content Modal</h3> <button class="modal-close" onclick="closeModal('customModal')">×</button> </div> <div class="modal-content" style="background: #f8f9fa; padding: 2rem;"> <p>This modal demonstrates custom content styling. The content area has a custom background color and padding.</p> <p>You can apply custom CSS classes to modify the appearance of the modal content area.</p> </div> <div class="modal-actions"> <button class="btn-secondary" onclick="closeModal('customModal')">Close</button> </div> </div> </div> </div> <div class="demo-section"> <h3>3. Modal with Tabs</h3> <p>In this occasion, the modal has tabs, each one with its main content and buttons.</p> <button class="modal-trigger" onclick="openModal('tabModal')">Open Tab Modal</button> <div id="tabModal" class="modal-overlay" onclick="closeModalOnBackdrop(event, 'tabModal')"> <div class="modal"> <div class="modal-header"> <h3 class="modal-title">Settings</h3> <button class="modal-close" onclick="closeModal('tabModal')">×</button> </div> <div class="modal-content"> <div class="tabs"> <button class="tab active" onclick="switchTab(event, 'general')">General</button> <button class="tab" onclick="switchTab(event, 'advanced')">Advanced</button> <button class="tab" onclick="switchTab(event, 'permissions')">Permissions</button> </div> <div id="general" class="tab-content active"> <h4>General Settings</h4> <p>Configure general settings for your dashboard.</p> <label> <input type="text" placeholder="Dashboard name" style="width: 100%; padding: 0.5rem; margin: 0.5rem 0;"> </label> <label> <textarea placeholder="Description" style="width: 100%; padding: 0.5rem; margin: 0.5rem 0; height: 80px;"></textarea> </label> </div> <div id="advanced" class="tab-content"> <h4>Advanced Settings</h4> <p>Configure advanced options for your dashboard.</p> <label> <input type="checkbox"> Enable auto-refresh </label><br> <label> <input type="checkbox"> Show time picker </label><br> <label> <input type="checkbox"> Enable annotations </label> </div> <div id="permissions" class="tab-content"> <h4>Permissions</h4> <p>Manage who can view and edit this dashboard.</p> <select style="width: 100%; padding: 0.5rem; margin: 0.5rem 0;"> <option>Public</option> <option>Private</option> <option>Team only</option> </select> </div> </div> <div class="modal-actions"> <button class="btn-secondary" onclick="closeModal('tabModal')">Cancel</button> <button class="btn-primary" onclick="closeModal('tabModal')">Save</button> </div> </div> </div> </div> <h2>Accessibility</h2> <p>Modal components follow the <a href="https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/" target="_blank">Dialog (Modal) Pattern</a>.</p> <p>Please check the keyboard behavior when building a modal. We have noticed that when the content is overflowing, the user cannot scroll it unless:</p> <ul> <li>The modal contains interactive elements, such as buttons, on the bottom.</li> <li>The content has <code>tabIndex = 0</code>, and therefore, it can be keyboard-focusable.</li> </ul> <h2>Links & Resources</h2> <p><a href="https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-modal--basic" target="_blank">Storybook Library</a></p> <script> function openModal(modalId) { const modal = document.getElementById(modalId); modal.classList.add('active'); // Trap focus const focusableElements = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'); const firstFocusableElement = focusableElements[0]; const lastFocusableElement = focusableElements[focusableElements.length - 1]; firstFocusableElement.focus(); // Handle escape key function handleEscape(e) { if (e.key === 'Escape') { closeModal(modalId); } } // Handle tab key for focus trap function handleTab(e) { if (e.key === 'Tab') { if (e.shiftKey) { if (document.activeElement === firstFocusableElement) { lastFocusableElement.focus(); e.preventDefault(); } } else { if (document.activeElement === lastFocusableElement) { firstFocusableElement.focus(); e.preventDefault(); } } } } document.addEventListener('keydown', handleEscape); document.addEventListener('keydown', handleTab); // Store cleanup function modal.cleanup = function() { document.removeEventListener('keydown', handleEscape); document.removeEventListener('keydown', handleTab); }; } function closeModal(modalId) { const modal = document.getElementById(modalId); modal.classList.remove('active'); // Cleanup event listeners if (modal.cleanup) { modal.cleanup(); } } function closeModalOnBackdrop(event, modalId) { if (event.target === event.currentTarget) { closeModal(modalId); } } function switchTab(event, tabId) { // Remove active class from all tabs and contents const tabs = event.target.parentElement.querySelectorAll('.tab'); const contents = event.target.closest('.modal-content').querySelectorAll('.tab-content'); tabs.forEach(tab => tab.classList.remove('active')); contents.forEach(content => content.classList.remove('active')); // Add active class to clicked tab and corresponding content event.target.classList.add('active'); document.getElementById(tabId).classList.add('active'); } </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">