• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. With header and footer
    2. Non-cancelable
    3. With blurry backdrop
  2. Properties
  3. Events
  4. Methods
    1. close() => Promise<void>
    2. showModal() => Promise<void>
  5. Shadow Parts
  6. Dependencies
    1. Used by
    2. Graph
Components Modal
(external link)

ld-modal #

The ld-modal component represents a dismissible modal dialog box.

The <dialog> element acts as the foundation for both, the Web Component version and the CSS component version of the component. The ld-modal Web Component wraps a <dialog> element and enhances its functionality which otherwise is not natively implemented, such as by emitting additional events and handling clicks on the dialog backdrop.

Examples #

Here is a minimalistic example of a modal dialog:

<ld-modal>
<ld-typo style="text-align: center">
I'm a modal dialog.
</ld-typo>
</ld-modal>

<ld-button onclick="event.target.previousElementSibling.showModal()">Open Modal</ld-button>
<dialog class="ld-modal">
<header class="ld-modal__header">
<button
class="ld-modal__x"
aria-label="Dismiss"
onclick="this.closest('dialog').close()"
>
</button>
</header>
<div class="ld-modal__content">
<p class="ld-typo" style="text-align: center">
I'm a modal dialog.
</p>
</div>
</dialog>

<button class="ld-button" onclick="event.target.previousElementSibling.showModal()">Open Modal</button>
const modalRef = useRef(null)

return (
<>
<LdModal ref={modalRef}>
<LdTypo style={ { textAlign: 'center' } }>I'm a modal dialog.</LdTypo>
</LdModal>

<LdButton onClick={() => modalRef.current.showModal()}>
Open Modal
</LdButton>
</>
)
I'm a modal dialog. Open Modal

I'm a modal dialog.

With header and footer #

You have two additional slots to your disposal for altering the modal header and footer which are both positioned fixed at top and bottom of the dialog element.

<ld-modal>
<ld-typo slot="header">Hello</ld-typo>
<ld-typo style="text-align: center">
I'm a modal dialog.
</ld-typo>
<ld-button slot="footer" style="width: 8rem" mode="ghost" onclick="this.closest('ld-modal').close()">Cancel</ld-button>
<ld-button slot="footer" style="width: 8rem" onclick="this.closest('ld-modal').close()">Submit</ld-button>
</ld-modal>

<ld-button onclick="event.target.previousElementSibling.showModal()">Open Modal</ld-button>
<dialog class="ld-modal">
<header class="ld-modal__header">
<p class="ld-typo">Hello</p>
<button
class="ld-modal__x"
aria-label="Dismiss"
onclick="this.closest('dialog').close()"
>
</button>
</header>
<div class="ld-modal__content">
<p class="ld-typo" style="text-align: center">
I'm a modal dialog.
</p>
</div>
<footer class="ld-modal__footer">
<button class="ld-button ld-button--ghost" style="width: 8rem" onclick="this.closest('dialog').close()">Cancel</button>
<button class="ld-button" style="width: 8rem" onclick="this.closest('dialog').close()">Submit</button>
</footer>
</dialog>

<button class="ld-button" onclick="event.target.previousElementSibling.showModal()">Open Modal</button>
const modalRef = useRef(null)

return (
<>
<LdModal ref={modalRef}>
<LdTypo slot="header">Hello</LdTypo>
<LdTypo style={ { textAlign: 'center' } }>I'm a modal dialog.</LdTypo>
<LdButton
slot="footer"
style={ { width: '8rem' } }
mode="ghost"
onClick={() => modalRef.current.close()}
>

Cancel
</LdButton>
<LdButton
slot="footer"
style={ { width: '8rem' } }
onClick={() => modalRef.current.close()}
>

Submit
</LdButton>
</LdModal>

<LdButton onClick={() => modalRef.current.showModal()}>
Open Modal
</LdButton>
</>
)
Hello I'm a modal dialog. Cancel Submit Open Modal

Hello

I'm a modal dialog.

Non-cancelable #

<ld-modal cancelable="false">
<ld-typo slot="header">Hello</ld-typo>
<ld-typo style="text-align: center">
I'm a modal dialog.
</ld-typo>
<ld-button slot="footer" style="width: 8rem" onclick="this.closest('ld-modal').close()">Submit</ld-button>
</ld-modal>

<ld-button onclick="event.target.previousElementSibling.showModal()">Open Modal</ld-button>
<dialog class="ld-modal" oncancel="event.preventDefault()">
<header class="ld-modal__header">
<p class="ld-typo">Hello</p>
</header>
<div class="ld-modal__content">
<p class="ld-typo" style="text-align: center">
I'm a modal dialog.
</p>
</div>
<footer class="ld-modal__footer">
<button class="ld-button" style="width: 8rem" onclick="this.closest('dialog').close()">Submit</button>
</footer>
</dialog>

<button class="ld-button" onclick="event.target.previousElementSibling.showModal()">Open Modal</button>
const modalRef = useRef(null)

return (
<>
<LdModal cancelable="false" ref={modalRef}>
<LdTypo slot="header">Hello</LdTypo>
<LdTypo style={ { textAlign: 'center' } }>I'm a modal dialog.</LdTypo>
<LdButton
slot="footer"
style={ { width: '8rem' } }
onClick={() => modalRef.current.close()}
>

Submit
</LdButton>
</LdModal>

<LdButton onClick={() => modalRef.current.showModal()}>
Open Modal
</LdButton>
</>
)
Hello I'm a modal dialog. Submit Open Modal

Hello

I'm a modal dialog.

With blurry backdrop #

<ld-modal blurry-backdrop>
<ld-typo style="text-align: center">
I'm a modal dialog.
</ld-typo>
</ld-modal>

<ld-button onclick="event.target.previousElementSibling.showModal()">Open Modal</ld-button>
<dialog class="ld-modal ld-modal--blurry-backdrop">
<header class="ld-modal__header">
<button
class="ld-modal__x"
aria-label="Dismiss"
onclick="this.closest('dialog').close()"
>
</button>
</header>
<div class="ld-modal__content">
<p class="ld-typo" style="text-align: center">
I'm a modal dialog.
</p>
</div>
</dialog>

<button class="ld-button" onclick="event.target.previousElementSibling.showModal()">Open Modal</button>
const modalRef = useRef(null)

return (
<>
<LdModal blurryBackdrop ref={modalRef}>
<LdTypo style={ { textAlign: 'center' } }>I'm a modal dialog.</LdTypo>
</LdModal>

<LdButton onClick={() => modalRef.current.showModal()}>
Open Modal
</LdButton>
</>
)
I'm a modal dialog. Open Modal

I'm a modal dialog.

Properties #

Property Attribute Description Type Default
blurryBackdrop blurry-backdrop Use a blurry backdrop. boolean false
cancelable cancelable The modal is cancelable by default. However, you can change this using this prop. boolean true
key key for tracking the node's identity when working with lists string | number undefined
open open Indicates that the modal dialog is active and can be interacted with. boolean undefined
ref ref reference to component any undefined

Events #

Event Description Type
ldmodalclosed Emitted when modal has closed (after transition). CustomEvent<any>
ldmodalclosing Emitted when modal is closing (before transition). CustomEvent<any>
ldmodalopened Emitted when modal has opened (after transition). CustomEvent<any>
ldmodalopening Emitted when modal is opening (before transition). CustomEvent<any>

Methods #

close() => Promise<void> #

Closes the modal dialog.

Returns #

Type: Promise<void>

showModal() => Promise<void> #

Opens the modal dialog.

Returns #

Type: Promise<void>

Shadow Parts #

Part Description
"content" div element wrapping the default slot
"dialog" Actual dialog element
"footer" footer element
"header" header element

Dependencies #

Used by #

  • ld-cookie-consent

Graph #

graph TD;
ld-cookie-consent --> ld-modal
style ld-modal fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS