Layr
⌘K
Ctrl K
Design Systems
Pro
AI Designer
Account
Roadmap
Sign in
Getting started
Salesforce Lightning
Lightning UI
Pro
Components
Accordion
Activity Timeline
Alert
App Launcher
Avatar
Avatar Group
Badges
Brand Band
Breadcrumbs
Builder Header
Button Groups
Button Icons
Buttons
Cards
Carousel
Chat
Checkbox
Checkbox Button
Checkbox Button Group
Checkbox Toggle
Color Picker
Combobox
Counter
Data Tables
Datepickers
Datetime Picker
Docked Composer
Docked Form Footer
Docked Utility Bar
Drop Zone
Dueling Picklist
Dynamic Icons
Dynamic Menu
Einstein Header
Expandable Section
Expression
Feeds
File Selector
Files
Form Element
Form Layout
Global Header
Global Navigation
Icons
Illustration
Input
List Builder
Lookups
Lookups Mobile
Map
Menus
Modals
Notifications
Page Headers
Panels
Path
Path Simple
Picklist
Pills
Popovers
Process
Progress Bar
Progress Indicator
Progress Ring
Prompt
Publishers
Radio Button Group
Radio Group
Regions
Rich Text Editor
Scoped Notifications
Scoped Tabs
Select
Setup Assistant
Slider
Spinners
Split View
Summary Detail
Tabs
Textarea
Tiles
Timepicker
Toast
Tooltips
Tree Grid
Trees
Trial Bar
Vertical Navigation
Vertical Tabs
Visual Picker
Welcome Mat
```html
Open Default Modal</button> <button class="slds-button slds-button_neutral" onclick="openModal('tagline')">Modal with Tagline</button> <button class="slds-button slds-button_outline-brand" onclick="openModal('headless')">Headless Modal</button> <button class="slds-button slds-button_outline-brand" onclick="openModal('footless')">Footless Modal</button> <button class="slds-button slds-button_outline-brand" onclick="openModal('directional')">Directional Modal</button> </div> <div class="demo-buttons"> <button class="slds-button slds-button_neutral" onclick="openModal('small')">Small Modal</button> <button class="slds-button slds-button_neutral" onclick="openModal('medium')">Medium Modal</button> <button class="slds-button slds-button_neutral" onclick="openModal('large')">Large Modal</button> <button class="slds-button slds-button_neutral" onclick="openModal('full')">Full Modal</button> </div> </div> <!-- About Modals --> <h2>About Modals</h2> <p>Default modals are used in the vast majority of cases. They are as wide as 50% of the viewport, but include a minimum and maximum width to avoid going too narrow or too wide.</p> <p>Modals always have an equal amount of space at the top and bottom to account for the height of the close button.</p> <p>Modals grow according to how much content is within, but once the modal full height (including the previously mentioned space on top and bottom), the content area will begin to scroll.</p> <p>Modals can have a tagline in the header, simply by adding a paragraph after the heading.</p> <p>By default, the content area of the modal does not have spacing. This allows for content such as Tables to be full-width to the modal. To get spacing when you need it, apply a padding utility (<code>.slds-p-around_medium</code>).</p> <!-- Accessibility --> <h2>Accessibility</h2> <div class="accessibility-info"> <p>Modals, by definition, trap focus. This means that if a user presses Tab or Shift+Tab while their keyboard focus is in the modal, their focus should stay in and cycle through the modal's content.</p> <h4>Expected markup</h4> <ul> <li>Modal has <code>role="dialog"</code></li> <li>When the modal is open, everything behind it has HTML attribute <code>aria-hidden="true"</code></li> <li>Modal contains an HTML heading with <code>tabindex="-1"</code></li> <li>Modal has an <code>aria-labelledby</code> attribute whose value is the id of the modal's heading</li> <li>Modal has an optional <code>aria-describedby</code> attribute</li> </ul> <h4>Expected keyboard interactions</h4> <ul> <li>Esc key closes the modal and moves focus to whatever triggered the modal to open</li> <li>Tab key at bottom of modal cycles focus back to first focusable element at top of modal</li> <li>Shift+Tab keys at top of modal cycle focus back to last focusable element at bottom of modal</li> <li>Enter key submits modal's form data, if applicable</li> </ul> </div> <!-- Mobile Notice --> <div class="mobile-notice"> <h3>Mobile</h3> <p>On mobile devices, modals will have buttons of increased size to accommodate tapping with a finger instead of the more precise mouse cursor.</p> </div> <!-- Base Modal Example --> <h2>Base</h2> <div class="demo-section"> <h3>Default Modal Structure</h3> <div class="code-example"> <pre><code><section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close"> <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true"> <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> <h2 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Modal Header</h2> </header> <div class="slds-modal__content slds-p-around_medium"> <p>Modal content goes here.</p> </div> <footer class="slds-modal__footer"> <button class="slds-button slds-button_neutral">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </footer> </div></section></code></pre> </div> </div> <!-- Layout Variations --> <h2>Layout</h2> <div class="demo-section"> <h3>Layout Variations</h3> <p>Modals support various layout configurations:</p> <ul> <li><strong>Taglines:</strong> Additional context in the header</li> <li><strong>Headless:</strong> Modal without a header section</li> <li><strong>Footless:</strong> Modal without a footer section</li> <li><strong>Directional:</strong> Footer buttons aligned left and right for navigation</li> </ul> </div> <!-- Sizes --> <h2>Sizes</h2> <div class="demo-section"> <h3>Modal Sizes</h3> <p>Modals come in different sizes to accommodate various content needs:</p> <ul> <li><strong>Small:</strong> <code>.slds-modal_small</code> - 480px max width</li> <li><strong>Medium:</strong> <code>.slds-modal_medium</code> - 640px max width</li> <li><strong>Large:</strong> <code>.slds-modal_large</code> - 90% viewport width</li> <li><strong>Full:</strong> <code>.slds-modal_full</code> - Full screen on small devices</li> </ul> </div> <!-- Styling Hooks --> <h2>Styling Hooks Overview</h2> <div class="code-example"> <p>Key CSS classes for modal customization:</p> <ul> <li><code>.slds-modal</code> - Main modal container</li> <li><code>.slds-modal__container</code> - Inner modal container</li> <li><code>.slds-modal__header</code> - Modal header</li> <li><code>.slds-modal__content</code> - Modal content area</li> <li><code>.slds-modal__footer</code> - Modal footer</li> <li><code>.slds-backdrop</code> - Modal backdrop</li> </ul> </div> <!-- Modal Backdrop --> <div class="modal-backdrop slds-backdrop" id="modal-backdrop"></div> <!-- Default Modal --> <div class="modal-container" id="modal-default"> <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-default" aria-modal="true" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick="closeModal()"> <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true"> <use href="#close"></use> </svg> <span class="slds-assistive-text">Close</span> </button> <h2 id="modal-heading-default" class="slds-modal__title slds-hyphenate">Modal Header</h2> </header> <div class="slds-modal__content slds-p-around_medium"> <p>This is a default modal. It contains content that is displayed above the main application. The modal traps focus and requires user interaction to close.</p> <p>You can include any content here such as forms, tables, or other components.</p> </div> <footer class="slds-modal__footer"> <button class="slds-button slds-button_neutral" onclick="closeModal()">Cancel</button> <button class="slds-button slds-button_brand">Save</button> </footer> </div> </section> </div> <!-- Modal with Tagline --> <div class="modal-container" id="modal-tagline"> <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-tagline" aria-modal="true" class="slds-modal slds-fade-in-open"> <div class="slds-modal__container"> <header class="slds-modal__header"> <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick="closeModal()"> <svg class="slds-button__icon slds-button__icon_large" aria-hidden="true"> <use href="#close"></use> </svg> <span class="slds-assistive-text">Close</span> </div> </div> </div> </div> </div> </div> <div class="hidden rotate-45 text-red-500 bg-red-100 dark:text-red-400 dark:bg-red-900/50 text-green-500 bg-green-100 dark:text-green-400 dark:bg-green-900/50 scheme-light scheme-dark scheme-light-dark"> </div> </main> </body> </html> <script> document.addEventListener("turbo:load", function() { var alerts = document.querySelectorAll('.alert') alerts.forEach(function(alert) { new bootstrap.Alert(alert) }) }) </script> <!--popover--> <script> document.addEventListener("DOMContentLoaded", function () { const dropdowns = document.querySelectorAll('[data-controller="dropdown-popover"]'); for (let i = 0; i < dropdowns.length; i++) { const dropdown = dropdowns[i]; const button = dropdown.querySelector('[data-dropdown-popover-target="button"]'); const menu = dropdown.querySelector('[data-dropdown-popover-target="menu"]'); if (!button || !menu) continue; let open = false; // Open menu button.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; open = true; }); // Close after leaving both button and menu button.addEventListener("mouseleave", () => { setTimeout(() => { if (!menu.matches(':hover')) { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; } }, 100); }); // Keep open while hovering over menu menu.addEventListener("mouseenter", () => { menu.style.opacity = "1"; menu.style.marginLeft = "-140px"; menu.style.pointerEvents = "auto"; menu.style.display = "block"; }); menu.addEventListener("mouseleave", () => { menu.style.opacity = "0"; menu.style.pointerEvents = "none"; menu.style.display = "none"; open = false; }); } }); </script> <!--sendJF--> <script> document.querySelectorAll('#sendFiddle').forEach((btn, index) => { btn.addEventListener('click', () => { const iframe = document.querySelectorAll('iframe')[index]; const srcdoc = iframe?.getAttribute('srcdoc'); if (!srcdoc) { alert('iframe srcdoc not available'); return; } // Extract <style> and <script> content from srcdoc using regex const cssMatches = [...srcdoc.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)]; const jsMatches = [...srcdoc.matchAll(/<script[^>]*>([\s\S]*?)<\/script>/gi)]; const css = cssMatches.map(m => m[1]).join('\n'); const js = jsMatches.map(m => m[1]).join('\n'); // Remove <style> and <script> blocks to isolate HTML const html = srcdoc .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '') .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '') .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&'); // Create and submit form to JSFiddle const form = document.createElement('form'); form.method = 'POST'; form.action = 'https://jsfiddle.net/api/post/library/pure/'; form.target = '_blank'; const addField = (name, value) => { const input = document.createElement('input'); input.type = 'hidden'; input.name = name; input.value = value; form.appendChild(input); }; addField('html', html.trim()); addField('css', css.trim()); addField('js', js.trim()); addField('title', 'From Layr iframe srcdoc'); document.body.appendChild(form); form.submit(); document.body.removeChild(form); }); }); </script> <!--fullscreen--> <script> document.querySelectorAll('#FullscreenTab').forEach((button) => { button.addEventListener('click', function () { // Prevent duplicate fullscreen overlays if (document.getElementById('fullscreen-iframe-wrapper')) return; // Find the closest snippet container and its iframe const snippetContainer = this.closest('[data-controller="snippet"]'); const iframe = snippetContainer?.querySelector('iframe'); if (!iframe) { console.error('No iframe found for this FullscreenTab.'); return; } // Create a cloned iframe using srcdoc or fallback to content HTML const iframeClone = document.createElement('iframe'); iframeClone.className = 'w-full h-full border-0 rounded-xl bg-white dark:bg-neutral-900'; iframeClone.setAttribute('sandbox', 'allow-same-origin allow-scripts allow-forms'); iframeClone.srcdoc = iframe.srcdoc || iframe.contentDocument?.documentElement?.outerHTML; // Create overlay const overlay = document.createElement('div'); overlay.id = 'fullscreen-iframe-wrapper'; overlay.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4'; // Create container for iframe and close button const container = document.createElement('div'); container.className = ' iframe_main_show relative w-full max-w-6xl h-[90vh] bg-white dark:bg-neutral-900 rounded-xl overflow-hidden shadow-2xl'; // Close button const closeBtn = document.createElement('button'); closeBtn.innerHTML = '×'; closeBtn.className = ` absolute top-3 right-3 text-white text-2xl font-bold bg-black/40 hover:bg-black/70 rounded-full w-10 h-10 flex items-center justify-center transition `; closeBtn.addEventListener('click', () => overlay.remove()); // Assemble container.appendChild(closeBtn); container.appendChild(iframeClone); overlay.appendChild(container); document.body.appendChild(overlay); }); }); </script> </body> </html>