Modal with close_button=True only in the header

Dash Python
1

If I don’t have a close button in the ModalFooter, and use close_button=True in ModalHeader instead, is there a button id I can use in my callback to check for triggered_id for example?

2

Could you perhaps add some more information? You can place the buttons whereever you want, including in the ModalHeader.

3

I want a discreet way to close the Modal popup - not a standard dbc.Button, just the minimal thing created with close_button=True inside ModalHeader. It looks like a tiny rectangle. I would prefer it to look like an “x”, not sure if that’s possible though.

4

Not sure if I understood you correctly, but you could use a html.Div() in combination with an icon:

import dash_bootstrap_components as dbc
from dash import Input, Output, State, html
import dash

app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP]
)

app.layout = html.Div(
    [
        dbc.Button("Open modal", id="open-dismiss"),
        dbc.Modal(
            [
                dbc.ModalHeader(
                    dbc.ModalTitle(
                        dbc.Stack(
                            [
                                html.Div("Dismissing"),
                                html.Div(
                                    id="close-dismiss",
                                    className='bi bi-x',
                                )
                            ],
                            direction='horizontal',
                        )
                    ),
                    close_button=False
                ),
                dbc.ModalBody(
                    "This modal has no close button and can't be dismissed by "
                    "pressing ESC. Try clicking on the backdrop or the below "
                    "close button."
                ),
                dbc.ModalFooter('nothing here'),
            ],
            id="modal-dismiss",
            keyboard=False,
            backdrop="static",
        ),
    ],
)


@app.callback(
    Output("modal-dismiss", "is_open"),
    [Input("open-dismiss", "n_clicks"), Input("close-dismiss", "n_clicks")],
    [State("modal-dismiss", "is_open")],
)
def toggle_modal(n_open, n_close, is_open):
    if n_open or n_close:
        return not is_open
    return is_open


if __name__ == '__main__':
    app.run(debug=True)
1 Like
5

Thanks, @AIMPED
I learned a few things from your example.
I found out that using external_stylesheets=[dbc.themes.BOOTSTRAP, dbc.icons.BOOTSTRAP] turns the close button into an “x”, so I ended up keeping close_button=True in the header instead of using the “close-dismiss” div.