Just put the <Modal></Modal> element inside your button and it will get that your button or
any other direct HTMLElement parent is the anchor. If your don’t need an anchor, set noAnchor on
the modal.
You can style how the anchor looks when modal is closed or openned with Tailwindcss and
classic CSS using data-modal=open or data-modal=close. For example with tailwindcss:
data-[modal=open]:shadow-lg put a shadow on the button when the modal is open.
You can add callback functions that take the modal remote as a parameter on the modal if your
want side effects when the modal opens or close.
You can pass a shallow property witch takes pushState from $app/environnement, a stateName for
the modal open property in page state. And the page store itself subscribed in the markup.
like page: $page
The <Tooltip> </Tooltip> element act approximatly the same. If you want a Modal and a tooltip on the same anchor, put the Tooltip component in the tooltip snippet of your modal so the tooltip will only shows when the modal is closed.
You can have a button that open a centered modal, try to close it by going backward on your
browser
Disable background scroll when modal is open
This uses property stopScrollElements. stopScrollElements requires a callback function
with the modal itself as a parameter (optional), and return an array of (HTMLElement,
undefined, null)[].
In this exemple, we put a « stopScroll » class the scrollable div containing the anchor.
And stopScrollElements is (m: modalRemote) => [m?.anchor?.closest('.stopScroll'), document.body]
Properties
this
If you want to open the modal on mouse events, use bind:this with the ModalComponent type. Inside, there is a function called openOnMouse dedicated to this purpose.
children
Default snippet, content to display inside the modal.
tooltip
Snippet for the tooltip, which appears only when the modal is closed.
backdropStyles
Styles applied to the backdrop (the background behind the modal).
class
Styles applied to the modal itself.
ModalOffset
Pixel offset of the modal from the anchor.
ModalShift
Pixel shift of the modal from the window borders.
centered
Determines whether the modal is centered or not.
noAutoUpdate
Disables automatic updates for the modal.
noCloseOnHide
Prevents the modal from closing when the anchor is hidden.
noOpenOnAnchorClick
Prevents the modal from opening when the anchor is clicked.
noCloseOnOutsideClick
Prevents the modal from closing when clicking outside of it. Use the `getModal` context function to retrieve the current modal and create your own button to close it.
middleware
Array of `floatingui/dom` middlewares to manage complex behaviors for the modal.
placement
Positioning of the modal relative to the anchor or mouse, based on enums from `floatingui/dom`.
noAnchor
Removes all dependencies on the anchor.
lockBackground
Prevents mouse events from propagating below the backdrop.
callbacks
Callback functions for showing and hiding the modal (`show` and `hide`).
stopScrollElements
an optionnal callback with the modal as parameter that returns (HTMLElement | undefined | null)[]. Make it returns any element you want to stop scroll on when modal opens