Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Layr - Carbon UI
Getting started
IBM Carbon
Carbon UI
Pro
Components
Accordion
Ai Label
Ai Skeleton
Breadcrumb
Button
Chat Button
Checkbox
Code Snippet
Combo Box
Content Switcher
Copy Button
Data Table
Date Picker
Dropdown
File Uploader
Form Group
Icon Button
Icon Indicator
Inline Loading
Layer
Link
List
Loading
Modal
Multi Select
Notification
Number Input
Overflow Menu
Pagination
Popover
Progress Bar
Progress Indicator
Radio Button
Search
Select
Side Panel
Skeleton Icon
Skeleton Placeholder
Skeleton Text
Skip To Content
Slider
Stack
Structured List
Tabs
Tag
Tearsheet
Text Input
Textarea
Tile
Toggle
Toggletip
Tooltip
Ui Shell
Extra Small</cds-button> <cds-button onclick="openModalSize('sm')" kind="secondary">Small</cds-button> <cds-button onclick="openModalSize('md')" kind="secondary">Medium</cds-button> <cds-button onclick="openModalSize('lg')" kind="secondary">Large</cds-button> </div> </div> <div class="demo-section"> <h2 id="with-form">Modal with Form</h2> <p>Example of a modal containing form elements:</p> <div class="button-group"> <cds-button onclick="openFormModal()" kind="primary">Open Form Modal</cds-button> </div> </div> <div class="demo-section"> <h2 id="danger">Danger Modal</h2> <p>For destructive actions that require confirmation:</p> <div class="button-group"> <cds-button onclick="openDangerModal()" kind="danger">Delete Item</cds-button> </div> </div> <!-- Modal Components --> <cds-modal id="basicModal" modal-heading="Basic Modal" modal-label="Example"> <p>This is a basic modal with some content. It can contain text, images, or other elements.</p> <p>The modal requires user interaction to dismiss it.</p> </cds-modal> <cds-modal id="sizeModal" modal-heading="Sized Modal" modal-label="Size Demo"> <p>This modal demonstrates different sizing options.</p> <p>The size can be adjusted based on content requirements.</p> </cds-modal> <cds-modal id="formModal" modal-heading="User Information" modal-label="Form" has-form> <form> <div style="margin-bottom: 1rem;"> <cds-text-input label="Full Name" placeholder="Enter your full name" required></cds-text-input> </div> <div style="margin-bottom: 1rem;"> <cds-text-input label="Email Address" placeholder="Enter your email" type="email" required></cds-text-input> </div> <div style="margin-bottom: 1rem;"> <cds-textarea label="Message" placeholder="Enter your message" rows="4"></cds-textarea> </div> </form> <div slot="actions"> <cds-button kind="secondary" onclick="closeFormModal()">Cancel</cds-button> <cds-button kind="primary" onclick="submitForm()">Submit</cds-button> </div> </cds-modal> <cds-modal id="dangerModal" modal-heading="Delete Item" modal-label="Confirm Action" danger> <p>Are you sure you want to delete this item? This action cannot be undone.</p> <p><strong>Item:</strong> Project Documentation.pdf</p> <div slot="actions"> <cds-button kind="secondary" onclick="closeDangerModal()">Cancel</cds-button> <cds-button kind="danger" onclick="confirmDelete()">Delete</cds-button> </div> </cds-modal> <!-- Code examples --> <div class="demo-section"> <h2 id="component-api">Component API</h2> <pre><code><cds-modal modal-heading="Title" modal-label="Label"> <p>Modal content goes here</p> <div slot="actions"> <cds-button kind="secondary">Cancel</cds-button> <cds-button kind="primary">Confirm</cds-button> </div> </cds-modal></code></pre> </div> <div class="demo-section"> <h2 id="cdn">CDN</h2> <p>This page uses: <code>modal.min.js</code> via <strong>https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/modal.min.js</strong> </p> </div> <div class="demo-section"> <h2 id="feedback">Feedback</h2> <p>Suggest changes on GitHub: <a href="https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/modal" target="_blank">Edit on GitHub</a> </p> </div> <script> function openModal() { document.getElementById("basicModal").open = true; } function openModalSize(size) { const modal = document.getElementById("sizeModal"); modal.size = size; modal.open = true; } function openFormModal() { document.getElementById("formModal").open = true; } function closeFormModal() { document.getElementById("formModal").open = false; } function submitForm() { // Handle form submission logic here alert("Form submitted successfully!"); closeFormModal(); } function openDangerModal() { document.getElementById("dangerModal").open = true; } function closeDangerModal() { document.getElementById("dangerModal").open = false; } function confirmDelete() { // Handle delete logic here alert("Item deleted!"); closeDangerModal(); } // Close modals when clicking outside or pressing escape document.addEventListener("DOMContentLoaded", function() { const modals = document.querySelectorAll("cds-modal"); modals.forEach(modal => { modal.addEventListener("cds-modal-closed", function() { modal.open = false; }); }); }); </script> </body> </html>' width="100%" height="1000" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">