dash dbc Modal: background more blur or dark

Question

I am working on a dash app.I am using dbc Modal with backdrop=False and getting totally visible background when modal is open. Also I tried backdrop='static' and getting atleast faint background.

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

modal = html.Div(
    [
        dbc.Button("Open modal", id="open", n_clicks=0),
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Header")),
                dbc.ModalBody("This is the content of the modal"),
                dbc.ModalFooter(
                    dbc.Button(
                        "Close", id="close", className="ms-auto", n_clicks=0
                    )
                ),
            ],
            id="modal",
            is_open=False,
            backdrop=False, # or 'static'
        ),
    ]
)


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

I tried

style={'opacity': '0.5 !important'}

But it has no effect.

Is it possible to make the background more blur or dark?

Answer 1

While keeping the backdrop=True, you can use the CSS selector and set the opacity within your ./assets/style.css file like this

.modal-backdrop.show {
   opacity: 0.5;
}