How to bring ConfirmDIalog Popup to centre of screen

📊 Plotly Python
1

How can i bring the pop up to centre of the screen ?

2

Hi @yogi_dhiman ,

I am not sure if this can be done with the dcc. ConfirmDialog

Maybe you could use the dbc.Modal instead.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/modal/

3

Thanks for response ;

I am using ConfirmDialogProvider for extra confirmation from user with OK and Cancel Button ;
It doesn’t look like Modal can replace the functionality or it can ?

4

@yogi_dhiman sure, you can. Here an example:

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

modal = html.Div(
    [
        dbc.Modal(
            [
                dbc.ModalHeader(dbc.ModalTitle("Header")),
                dbc.ModalBody("Confirm or cancel"),
                dbc.ModalFooter(
                    children=[
                        dbc.ButtonGroup(
                            [
                                dbc.Button(
                                    "OK",
                                    id="ok",
                                    className="ms-auto",
                                    n_clicks=0
                                ),
                                dbc.Button(
                                    "Cancel",
                                    id="cancel",
                                    className="ms-auto",
                                    n_clicks=0
                                )
                            ]
                        )
                    ]
                ),
            ],
            id="modal",
            is_open=False,
            centered=True
        ),
    ]
)

app = dash.Dash(
    __name__,
    external_stylesheets=[dbc.themes.SLATE],
    meta_tags=[
        {'name': 'viewport',
         'content': 'width=device-width, initial-scale=1.0'
         }
    ]
)
app.layout = html.Div(
    [
        dbc.Button(
            "Open modal",
            id="open",
            n_clicks=0
        ),
        html.Div(id='out'),
        modal
    ]
)


@app.callback(
    [
        Output("modal", "is_open"),
        Output("out", "children"),
    ],
    [
        Input("open", "n_clicks"),
        Input("ok", "n_clicks"),
        Input("cancel", "n_clicks"),
    ],
    [
        State("modal", "is_open")
    ],
    prevent_initial_call=True
)
def toggle_modal(open_modal, ok, cancel, is_open):
    trigger = ctx.triggered_id

    if trigger == 'open':
        return not is_open, 'just opened'
    if trigger == 'ok':
        return not is_open, 'you just confirmed'
    if trigger == 'cancel':
        return not is_open, 'you just canceled'


if __name__ == '__main__':
    app.run(debug=True, port=8051)

mred modal

2 Likes
5

Amazing ; reused your help and code . working perfectly

1 Like