Modal

A modal component is a UI element that is displayed on top of the current page and is used to show additional content or actions.

Modal Content

Code

<dialog id="example-modal-window" class="backoffice-modal">
  <form method="dialog" class="modal-backdrop">
    <button class="h-[100vh] w-[100vw]">close</button>
  </form>
  <div class="backoffice-modal-box">
    <p>Modal Content</p>
  </div>
</dialog>
Class nametype
backoffice-modalcomponentContainer element
backoffice-modal-boxcomponentContainer element
backoffice-modal-backdropcomponentSets modal backdrop element
backoffice-modal[data-scroll]modifierSets the scrolling behavior

:root:has(

:is(

.backoffice-modal-open, .backoffice-modal:target, .backoffice-modal-toggle:checked + .backoffice-modal, .backoffice-modal[open]

)

) { ... }

modifierSets the scrolling settings if any of those selectors is matching
backoffice-modal-open,
backoffice-modal:target,
backoffice-modal-toggle:checked + .backoffice-modal,
backoffice-modal[open]
modifierSets the display properties for those selectors

Was this page helpful?