Modal
Dialog/popup component for focused interactions
Class Reference There are 3 ways to use a modal:
Using <dialog> element (needs JS) with Esc key supportRecommended Hidden <input type='checkbox'> with <label> toggleLegacy <a> anchor links with URL parametersLegacy
Make sure you're using unique IDs for each modal
Method 1: Using <dialog> Elementrecommended
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_1.showModal()', cls='btn'),
Dialog(
Div(
H3('Hello!', cls='text-lg font-bold'),
P('Press ESC key or click the button below to close', cls='py-4'),
Div(
Form(
# <!-- if there is a button in form, it will close the modal -->
Button('Close', cls='btn'),
method='dialog'
),
cls='modal-action'
),
cls='modal-box'
),
id='my_modal_1',
cls='modal'
)
Auto-import documentation coming soon...
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_2.showModal()', cls='btn'),
Dialog(
Div(
H3('Hello!', cls='text-lg font-bold'),
P('Press ESC key or click outside to close', cls='py-4'),
cls='modal-box'
),
Form(
Button('close'),
method='dialog',
cls='modal-backdrop'
),
id='my_modal_2',
cls='modal'
)
Auto-import documentation coming soon...
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_3.showModal()', cls='btn'),
Dialog(
Div(
Form(
Button('✕', cls='btn btn-sm btn-circle btn-ghost absolute right-2 top-2'),
method='dialog'
),
H3('Hello!', cls='text-lg font-bold'),
P('Press ESC key or click on ✕ button to close', cls='py-4'),
cls='modal-box'
),
id='my_modal_3',
cls='modal'
)
Auto-import documentation coming soon...
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_4.showModal()', cls='btn'),
Dialog(
Div(
H3('Hello!', cls='text-lg font-bold'),
P('Click the button below to close', cls='py-4'),
Div(
Form(
# <!-- If there is a button, it will close the modal -->
Button('Close', cls='btn'),
method='dialog'
),
cls='modal-action'
),
cls='modal-box w-11/12 max-w-5xl'
),
id='my_modal_4',
cls='modal'
)
Auto-import documentation coming soon...
# <!-- Open the modal using ID.showModal() method -->
Button('open modal', onclick='my_modal_5.showModal()', cls='btn'),
Dialog(
Div(
H3('Hello!', cls='text-lg font-bold'),
P('Press ESC key or click the button below to close', cls='py-4'),
Div(
Form(
# <!-- A button in form will close the modal -->
Button('Close', cls='btn'),
method='dialog'
),
cls='modal-action'
),
cls='modal-box'
),
id='my_modal_5',
cls='modal modal-bottom sm:modal-middle'
)
Auto-import documentation coming soon...
Hello!
This modal works with a hidden checkbox!
# <!-- The button to open modal -->
Label('open modal', fr='my_modal_6', cls='btn'),
# <!-- Put this part before </body> tag -->
Input(type='checkbox', id='my_modal_6', cls='modal-toggle'),
Div(
Div(
H3('Hello!', cls='text-lg font-bold'),
P('This modal works with a hidden checkbox!', cls='py-4'),
Div(
Label('Close!', fr='my_modal_6', cls='btn'),
cls='modal-action'
),
cls='modal-box'
),
role='dialog',
cls='modal z-999'
)
Auto-import documentation coming soon...
Hello!
This modal works with a hidden checkbox!
# <!-- The button to open modal -->
Label('open modal', fr='my_modal_7', cls='btn'),
# <!-- Put this part before </body> tag -->
Input(type='checkbox', id='my_modal_7', cls='modal-toggle'),
Div(
Div(
H3('Hello!', cls='text-lg font-bold'),
P('This modal works with a hidden checkbox!', cls='py-4'),
cls='modal-box'
),
Label('Close', fr='my_modal_7', cls='modal-backdrop'),
role='dialog',
cls='modal'
)
Auto-import documentation coming soon...
Method 2: Hidden Checkboxlegacy
ℹ️ Note: May have z-index issues in complex layouts
Method 3: Anchor Linkslegacy
ℹ️ Note: Limited SPA compatibility - dialog method recommended
# <!-- The button to open modal -->
A('open modal', href='#my_modal_8', cls='btn'),
# <!-- Put this part before </body> tag -->
Div(
Div(
H3('Hello!', cls='text-lg font-bold'),
P('This modal works with anchor links', cls='py-4'),
Div(
A('Yay!', href='#', cls='btn'),
cls='modal-action'
),
cls='modal-box'
),
role='dialog',
id='my_modal_8',
cls='modal'
)
Auto-import documentation coming soon...
Class Reference
Class name | Type | Description |
---|---|---|
modal | Component | Container for modal content |
modal-box | Part | Main content container |
modal-action | Part | Actions part (buttons, etc.) |
modal-backdrop | Part | Clickable overlay background |
modal-toggle | Part | Hidden checkbox for modal state |
modal-open | Modifier | Force open state |
modal-top | Placement | Align to top of screen |
modal-middle | Placement | Vertical centering [Default] |
modal-bottom | Placement | Align to bottom |
modal-start | Placement | Align to start horizontally |
modal-end | Placement | Align to end horizontally |
Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
LLMs Context: Full Markdown | This Component