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.
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 name | type | |
---|---|---|
backoffice-modal | component | Container element |
backoffice-modal-box | component | Container element |
backoffice-modal-backdrop | component | Sets modal backdrop element |
backoffice-modal[data-scroll] | modifier | Sets the scrolling behavior |
:root:has( :is( .backoffice-modal-open, .backoffice-modal:target, .backoffice-modal-toggle:checked + .backoffice-modal, .backoffice-modal[open] ) ) { ... } | modifier | Sets 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] | modifier | Sets the display properties for those selectors |