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?
Could you perhaps add some more information? You can place the buttons whereever you want, including in the ModalHeader.
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.
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)
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.