Dash bootstrap modal automatically closing after 3 seconds

Dash Python
1

Hi guys,

I have a modal that I open with a button click.
This modal is showing a message.
I want this message to show for 3 seconds and afterwards automatically close the modal.
Can anyone help me with this?

Thank you!!

Kind regards,

Nick

2

hi Nick (@nickm100 0
:wave: welcome to the community.

Does it have to be a modal? Could you use a dbc.Alert?

Either one you choose, you could probably set the callback up so:
once the button is clicked to show the alert (or open the modal), a timer starts, and after 3 second you return is_open = False

3

Hi Adam,

Thanks.

I am still a beginner, is it to much to ask for a example?

4

hi Nick (@nickm100 ),

Try this code. The duration property will define the amount of time it take for the message to disappear.

import dash_bootstrap_components as dbc
from dash import Input, Output, State, html, Dash
app = Dash(__name__, use_pages=False, external_stylesheets=[dbc.themes.SPACELAB])

alert = html.Div(
    [
        dbc.Button(
            "Read this", id="alert-toggle-auto", className="me-1", n_clicks=0
        ),
        html.Hr(),
        dbc.Alert(
            "Hello! I am an auto-dismissing alert!",
            id="alert-auto",
            is_open=False,
            duration=3000,
        ),
    ]
)

app.layout = dbc.Container([
    alert
])

@app.callback(
    Output("alert-auto", "is_open"),
    [Input("alert-toggle-auto", "n_clicks")],
    [State("alert-auto", "is_open")],
)
def toggle_alert(n, is_open):
    if n:
        return not is_open
    return is_open


if __name__ == "__main__":
    app.run(debug=False)
5

Thanks @adamschroeder , that works.

I am also going to try it with a modal.