0
# Modal Components
1

2
Dialog boxes and modal windows for displaying content overlays, forms, confirmations, and user interactions.
3

4
## Capabilities
5

6
### Modal
7

8
Main modal dialog component with backdrop and positioning options.
9

10
```python { .api }
11
class Modal:
12
    """
13
    Modal dialog component for overlay content.
14
    
15
    Args:
16
        children: Modal content (ModalHeader, ModalBody, ModalFooter)
17
        id (str): Component identifier for callbacks
18
        is_open (bool): Control modal visibility
19
        style (dict): Inline CSS styles
20
        class_name (str): Additional CSS classes
21
        centered (bool): Center modal vertically in viewport
22
        fade (bool): Enable fade animation
23
        backdrop (bool|str): Backdrop behavior - True (clickable), False (none), "static" (non-clickable)
24
        keyboard (bool): Close modal with Escape key
25
        size (str): Modal size - "sm", "lg", "xl"
26
        fullscreen (bool|str): Fullscreen modal - True (always), "sm-down", "md-down", "lg-down", "xl-down", "xxl-down"
27
        scrollable (bool): Enable scrolling within modal body
28
        zindex (int): CSS z-index for modal
29
    """
30
    def __init__(self, children=None, id=None, is_open=False, style=None, class_name=None,
31
                 centered=False, fade=True, backdrop=True, keyboard=True, size=None,
32
                 fullscreen=False, scrollable=False, zindex=None, **kwargs): ...
33
```
34

35
### ModalHeader
36

37
Header section for modals with title and close button.
38

39
```python { .api }
40
class ModalHeader:
41
    """
42
    Header section for modals with optional close button.
43
    
44
    Args:
45
        children: Header content (typically ModalTitle)
46
        id (str): Component identifier
47
        style (dict): Inline CSS styles
48
        class_name (str): Additional CSS classes
49
        close_button (bool): Show close button (X)
50
        tag (str): HTML tag for header element
51
    """
52
    def __init__(self, children=None, id=None, style=None, class_name=None,
53
                 close_button=True, tag="div", **kwargs): ...
54
```
55

56
### ModalTitle
57

58
Title component for modal headers with appropriate typography.
59

60
```python { .api }
61
class ModalTitle:
62
    """
63
    Title component for modal headers.
64
    
65
    Args:
66
        children: Title text or content
67
        id (str): Component identifier
68
        style (dict): Inline CSS styles
69
        class_name (str): Additional CSS classes
70
        tag (str): HTML tag for title element
71
    """
72
    def __init__(self, children=None, id=None, style=None, class_name=None,
73
                 tag="h5", **kwargs): ...
74
```
75

76
### ModalBody
77

78
Main content area for modals with scrolling and padding.
79

80
```python { .api }
81
class ModalBody:
82
    """
83
    Main content area for modals.
84
    
85
    Args:
86
        children: Body content
87
        id (str): Component identifier
88
        style (dict): Inline CSS styles
89
        class_name (str): Additional CSS classes
90
    """
91
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
92
```
93

94
### ModalFooter
95

96
Footer section for modals with action buttons and secondary content.
97

98
```python { .api }
99
class ModalFooter:
100
    """
101
    Footer section for modals with action buttons.
102
    
103
    Args:
104
        children: Footer content (typically buttons)
105
        id (str): Component identifier
106
        style (dict): Inline CSS styles
107
        class_name (str): Additional CSS classes
108
    """
109
    def __init__(self, children=None, id=None, style=None, class_name=None, **kwargs): ...
110
```
111

112
## Usage Examples
113

114
### Basic Modal
115

116
```python
117
import dash_bootstrap_components as dbc
118
from dash import html, callback, Input, Output, State
119

120
# Basic modal with trigger button
121
modal_content = html.Div([
122
    dbc.Button("Open Modal", id="open-modal", color="primary"),
123
    dbc.Modal([
124
        dbc.ModalHeader([
125
            dbc.ModalTitle("Modal Title")
126
        ]),
127
        dbc.ModalBody("This is the modal body content."),
128
        dbc.ModalFooter([
129
            dbc.Button("Close", id="close-modal", color="secondary"),
130
            dbc.Button("Save", color="primary"),
131
        ]),
132
    ], id="modal", is_open=False),
133
])
134

135
@callback(
136
    Output("modal", "is_open"),
137
    [Input("open-modal", "n_clicks"), Input("close-modal", "n_clicks")],
138
    [State("modal", "is_open")],
139
)
140
def toggle_modal(open_clicks, close_clicks, is_open):
141
    if open_clicks or close_clicks:
142
        return not is_open
143
    return is_open
144
```
145

146
### Confirmation Modal
147

148
```python
149
from dash import callback, Input, Output, State
150

151
# Confirmation dialog
152
confirmation_modal = html.Div([
153
    dbc.Button("Delete Item", id="delete-btn", color="danger"),
154
    html.Div(id="delete-result"),
155
    dbc.Modal([
156
        dbc.ModalHeader([
157
            dbc.ModalTitle("Confirm Deletion")
158
        ]),
159
        dbc.ModalBody([
160
            html.P("Are you sure you want to delete this item?"),
161
            html.P("This action cannot be undone.", className="text-danger"),
162
        ]),
163
        dbc.ModalFooter([
164
            dbc.Button("Cancel", id="cancel-delete", color="secondary"),
165
            dbc.Button("Delete", id="confirm-delete", color="danger"),
166
        ]),
167
    ], id="confirm-modal", is_open=False),
168
])
169

170
@callback(
171
    Output("confirm-modal", "is_open"),
172
    [Input("delete-btn", "n_clicks"), Input("cancel-delete", "n_clicks"), Input("confirm-delete", "n_clicks")],
173
    [State("confirm-modal", "is_open")],
174
)
175
def toggle_confirmation(delete_clicks, cancel_clicks, confirm_clicks, is_open):
176
    if delete_clicks or cancel_clicks or confirm_clicks:
177
        return not is_open
178
    return is_open
179

180
@callback(
181
    Output("delete-result", "children"),
182
    [Input("confirm-delete", "n_clicks")],
183
    prevent_initial_call=True
184
)
185
def handle_delete(n_clicks):
186
    if n_clicks:
187
        return dbc.Alert("Item deleted successfully!", color="success", dismissable=True)
188
    return ""
189
```
190

191
### Form Modal
192

193
```python
194
# Modal with form content
195
form_modal = html.Div([
196
    dbc.Button("Add User", id="add-user-btn", color="success"),
197
    dbc.Modal([
198
        dbc.ModalHeader([
199
            dbc.ModalTitle("Add New User")
200
        ]),
201
        dbc.ModalBody([
202
            dbc.Form([
203
                dbc.Row([
204
                    dbc.Label("Name", html_for="user-name", width=3),
205
                    dbc.Col([
206
                        dbc.Input(id="user-name", placeholder="Enter name"),
207
                    ], width=9),
208
                ], className="mb-3"),
209
                dbc.Row([
210
                    dbc.Label("Email", html_for="user-email", width=3),
211
                    dbc.Col([
212
                        dbc.Input(id="user-email", type="email", placeholder="Enter email"),
213
                    ], width=9),
214
                ], className="mb-3"),
215
                dbc.Row([
216
                    dbc.Label("Role", html_for="user-role", width=3),
217
                    dbc.Col([
218
                        dbc.Select(
219
                            id="user-role",
220
                            options=[
221
                                {"label": "User", "value": "user"},
222
                                {"label": "Admin", "value": "admin"},
223
                                {"label": "Manager", "value": "manager"},
224
                            ],
225
                            value="user",
226
                        ),
227
                    ], width=9),
228
                ], className="mb-3"),
229
            ])
230
        ]),
231
        dbc.ModalFooter([
232
            dbc.Button("Cancel", id="cancel-add-user", color="secondary"),
233
            dbc.Button("Add User", id="submit-add-user", color="success"),
234
        ]),
235
    ], id="form-modal", is_open=False),
236
])
237

238
@callback(
239
    Output("form-modal", "is_open"),
240
    [Input("add-user-btn", "n_clicks"), Input("cancel-add-user", "n_clicks"), Input("submit-add-user", "n_clicks")],
241
    [State("form-modal", "is_open")],
242
)
243
def toggle_form_modal(add_clicks, cancel_clicks, submit_clicks, is_open):
244
    if add_clicks or cancel_clicks or submit_clicks:
245
        return not is_open
246
    return is_open
247
```
248

249
### Different Modal Sizes
250

251
```python
252
# Modals with different sizes
253
modal_sizes = html.Div([
254
    dbc.Button("Small Modal", id="sm-modal-btn", color="info", className="me-2"),
255
    dbc.Button("Large Modal", id="lg-modal-btn", color="warning", className="me-2"),
256
    dbc.Button("Extra Large", id="xl-modal-btn", color="danger"),
257
    
258
    # Small modal
259
    dbc.Modal([
260
        dbc.ModalHeader("Small Modal"),
261
        dbc.ModalBody("This is a small modal."),
262
        dbc.ModalFooter(dbc.Button("Close", id="close-sm-modal", color="secondary")),
263
    ], id="sm-modal", size="sm", is_open=False),
264
    
265
    # Large modal
266
    dbc.Modal([
267
        dbc.ModalHeader("Large Modal"),
268
        dbc.ModalBody("This is a large modal with more space for content."),
269
        dbc.ModalFooter(dbc.Button("Close", id="close-lg-modal", color="secondary")),
270
    ], id="lg-modal", size="lg", is_open=False),
271
    
272
    # Extra large modal
273
    dbc.Modal([
274
        dbc.ModalHeader("Extra Large Modal"),
275
        dbc.ModalBody("This is an extra large modal for complex content."),
276
        dbc.ModalFooter(dbc.Button("Close", id="close-xl-modal", color="secondary")),
277
    ], id="xl-modal", size="xl", is_open=False),
278
])
279
```
280

281
### Scrollable Modal
282

283
```python
284
# Modal with scrollable content
285
scrollable_modal = html.Div([
286
    dbc.Button("Scrollable Modal", id="scroll-modal-btn", color="primary"),
287
    dbc.Modal([
288
        dbc.ModalHeader("Scrollable Modal"),
289
        dbc.ModalBody([
290
            html.P("This modal has a lot of content that requires scrolling."),
291
            *[html.P(f"Paragraph {i+1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.") for i in range(20)],
292
        ]),
293
        dbc.ModalFooter(dbc.Button("Close", id="close-scroll-modal", color="secondary")),
294
    ], id="scroll-modal", scrollable=True, is_open=False),
295
])
296
```
297

298
### Centered Modal
299

300
```python
301
# Vertically centered modal
302
centered_modal = html.Div([
303
    dbc.Button("Centered Modal", id="center-modal-btn", color="success"),
304
    dbc.Modal([
305
        dbc.ModalHeader("Centered Modal"),
306
        dbc.ModalBody("This modal is vertically centered in the viewport."),
307
        dbc.ModalFooter(dbc.Button("Close", id="close-center-modal", color="secondary")),
308
    ], id="center-modal", centered=True, is_open=False),
309
])
310
```
311

312
### Static Backdrop Modal
313

314
```python
315
# Modal with static backdrop (cannot be closed by clicking backdrop)
316
static_modal = html.Div([
317
    dbc.Button("Static Modal", id="static-modal-btn", color="warning"),
318
    dbc.Modal([
319
        dbc.ModalHeader("Static Backdrop Modal"),
320
        dbc.ModalBody("This modal cannot be closed by clicking the backdrop."),
321
        dbc.ModalFooter(dbc.Button("Close", id="close-static-modal", color="secondary")),
322
    ], id="static-modal", backdrop="static", is_open=False),
323
])
324
```
325

326
### Fullscreen Modal
327

328
```python
329
# Fullscreen modal
330
fullscreen_modal = html.Div([
331
    dbc.Button("Fullscreen Modal", id="fs-modal-btn", color="dark"),
332
    dbc.Modal([
333
        dbc.ModalHeader("Fullscreen Modal"),
334
        dbc.ModalBody([
335
            html.H3("Fullscreen Content"),
336
            html.P("This modal takes up the entire viewport."),
337
            html.P("It's useful for immersive experiences or complex forms."),
338
        ]),
339
        dbc.ModalFooter(dbc.Button("Close", id="close-fs-modal", color="secondary")),
340
    ], id="fs-modal", fullscreen=True, is_open=False),
341
])
342
```
343

344
### Image Modal
345

346
```python
347
# Modal for displaying images
348
image_modal = html.Div([
349
    html.Img(
350
        src="/static/images/thumbnail.jpg",
351
        id="image-thumb",
352
        style={"width": "150px", "cursor": "pointer"},
353
        className="img-thumbnail"
354
    ),
355
    dbc.Modal([
356
        dbc.ModalBody([
357
            html.Img(
358
                src="/static/images/full-size.jpg",
359
                style={"width": "100%"},
360
                className="img-fluid"
361
            )
362
        ], style={"padding": "0"}),
363
    ], id="image-modal", size="lg", is_open=False),
364
])
365

366
@callback(
367
    Output("image-modal", "is_open"),
368
    [Input("image-thumb", "n_clicks")],
369
    [State("image-modal", "is_open")],
370
)
371
def toggle_image_modal(n_clicks, is_open):
372
    if n_clicks:
373
        return not is_open
374
    return is_open
375
```