Modal
A modal is a dialog that takes over the screen, positioning itself over the rest of the content. While the modal is open the rest of the page cannot be interacted with.
This component is for the actual dialog. It is designed to work together with the fun-modal-controller component.
Note that the modal is 100% width by default, so you should probably apply a max width.
The tailwind max-w-xl , max-w-2xl classes are suitable for this.
If your modal will contain other floating content such as popovers or tooltips you should add class relative to your body content,
so that positioning works properly in Firefox and safari.
See the Modals page for more details of using modals with further examples.
Examples
Specifications
Properties
| Property | Attribute | Required | Description |
|---|---|---|---|
| closeButton | close-button | Should the modal have a close button |
Events
| Name | Description |
|---|---|
| funModalClose | Occurs when the close button is clicked. |
Slots
| Name | Description |
|---|---|
| body | For the modal body. |
| footer | For the modal footer, usually only contains action buttons. |
| header | For the modal header / title. |
