# Modals API Reference

### Example Modal

See Source

See Output

Open Modal

## Simple Test Modal

With some somewhat brief content to show that it works!

Close

[code]

    def ex_modal():
        return Div(
            Button("Open Modal",data_uk_toggle="target: #my-modal" ),
            Modal(ModalTitle("Simple Test Modal"), 
                  P("With some somewhat brief content to show that it works!", cls=TextPresets.muted_sm),
                  footer=ModalCloseButton("Close", cls=ButtonT.primary),id='my-modal'))
    
[/code]

### Modal

Source

[code]

    Modal(*c, header=None, footer=None, cls=(), dialog_cls=(), header_cls='p-6', body_cls='space-y-6', footer_cls=(), id='', open=False, **kwargs) -> fastcore.xml.FT
[/code]

> Creates a modal with the appropriate classes to put the boilerplate in the appropriate places for you

**Params**

  * `c` Components to put in the `ModalBody` (often forms, sign in buttons, images, etc.)

  * `header` Components that go in the `ModalHeader` (often a `ModalTitle`)

  * `footer` Components that go in the `ModalFooter` (often a `ModalCloseButton`)

  * `cls` Additional classes on the outermost `ModalContainer`

  * `dialog_cls` Additional classes on the `ModalDialog`

  * `header_cls` Additional classes on the `ModalHeader`

  * `body_cls` Additional classes on the `ModalBody`

  * `footer_cls` Additional classes on the `ModalFooter`

  * `id` id for the outermost container

  * `open` Whether the modal is open (typically used for HTMX controlled modals)

  * `kwargs`

**Returns:** Fully styled modal FT Component

### ModalCloseButton

Source

[code]

    ModalCloseButton(*c, cls='absolute top-3 right-3', htmx=False, **kwargs) -> fastcore.xml.FT
[/code]

> Creates a button that closes a modal with js

**Params**

  * `c` Components to put in the button (often text and/or an icon)

  * `cls` Additional classes on the button

  * `htmx` Whether to use HTMX to close the modal (must add hx_get to a route that closes the modal)

  * `kwargs`

**Returns:** Button(..., cls='uk-modal-close') + `hx_target` and `hx_swap` if htmx is True

The remainder of the Modal functions below are used internally by the `Modal` function for you. You shouldn't need to use them unless you're doing something really special.

### ModalTitle

Source

[code]

    ModalTitle(*c, cls=(), **kwargs) -> fastcore.xml.FT
[/code]

> Creates a modal title

**Params**

  * `c` Components to put in the `ModalTitle` (often text)

  * `cls` Additional classes on the `ModalTitle`

  * `kwargs`

**Returns:** H2(..., cls='uk-modal-title')

### ModalFooter

Source

[code]

    ModalFooter(*c, cls=(), **kwargs) -> fastcore.xml.FT
[/code]

> Creates a modal footer

**Params**

  * `c` Components to put in the `ModalFooter` (often buttons)

  * `cls` Additional classes on the `ModalFooter`

  * `kwargs`

**Returns:** Div(..., cls='uk-modal-footer')

### ModalBody

Source

[code]

    ModalBody(*c, cls=(), **kwargs) -> fastcore.xml.FT
[/code]

> Creates a modal body

**Params**

  * `c` Components to put in the `ModalBody` (often forms, sign in buttons, images, etc.)

  * `cls` Additional classes on the `ModalBody`

  * `kwargs`

**Returns:** Div(..., cls='uk-modal-body')

### ModalHeader

Source

[code]

    ModalHeader(*c, cls=(), **kwargs) -> fastcore.xml.FT
[/code]

> Creates a modal header

**Params**

  * `c` Components to put in the `ModalHeader`

  * `cls` Additional classes on the `ModalHeader`

  * `kwargs`

**Returns:** Div(..., cls='uk-modal-header')

### ModalDialog

Source

[code]

    ModalDialog(*c, cls=(), **kwargs) -> fastcore.xml.FT
[/code]

> Creates a modal dialog

**Params**

  * `c` Components to put in the `ModalDialog` (often `ModalBody`, `ModalHeader`, etc)

  * `cls` Additional classes on the `ModalDialog`

  * `kwargs`

**Returns:** Div(..., cls='uk-modal-dialog')

### ModalContainer

Source

[code]

    ModalContainer(*c, cls=(), **kwargs) -> fastcore.xml.FT
[/code]

> Creates a modal container that components go in

**Params**

  * `c` Components to put in the modal (often `ModalDialog`)

  * `cls` Additional classes on the `ModalContainer`

  * `kwargs`

**Returns:** Div(..., cls='uk-modal uk-modal-container')