A modal dialog is a window overlaid on either the primary window or another dialog window. Content behind a modal dialog is inert, meaning that users cannot interact with it.
class ModalState(rx.State):
show: bool = False
def change(self):
self.show = not (self.show)
def modal_example():
return rc.vstack(
rc.button("Confirm", on_click=ModalState.change),
rc.modal(
rc.modal_overlay(
rc.modal_content(
rc.modal_header("Confirm"),
rc.modal_body(
"Do you want to confirm example?"
),
rc.modal_footer(
rc.button(
"Close",
on_click=ModalState.change,
)
),
)
),
is_open=ModalState.show,
),
)
rc.Modal
The wrapper that provides context for its children.
rc.ModalOverlay
The dimmed overlay behind the modal dialog.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.ModalContent
The container for the modal dialog's content.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.ModalHeader
The header that labels the modal dialog.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.ModalBody
The wrapper that houses the modal's main content.
Props
No component specific props
Event Triggers
See the full list of default event triggersrc.ModalFooter
The footer that houses the modal events.
Props
No component specific props