Liquid – Modal

Components

Modal

(external link)

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

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

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

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

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

ld-modal #

Examples #

With header and footer #

Non-cancelable #

With blurry backdrop #

Properties #

Events #

Methods #

close() => Promise<void> #

Returns #

showModal() => Promise<void> #

Returns #

Shadow Parts #

Dependencies #

Used by #

Graph #

`close() => Promise<void>` #

`showModal() => Promise<void>` #