CODEWITHSUNDEEP
pythonplotlydashboardplotly-dash
user14276694
user14276694

Reputation: 53

Adding buttons with external links to plotly dash modal

New to dash, trying to figure out how to create a modal (pop-up window) that has its own buttons inside it. I have read the dbc docs and they don't seem to discuss how to add content inside of a modal that link elsewhere. Ideally, this modal will have a message, but also a button that links to jira. I was thinking something like this:

import dash_html_components as html
from dash.dependencies import Input, Output, State

modal = html.Div(
   [
       dbc.Button("Open", id="open-centered"),
       dbc.Modal(
           [
               dbc.ModalHeader("Request"),
               dbc.ModalBody("Click the link below to be directed to your request"),
               dbc.ModalFooter(
                   dbc.Button(
                       "Close", id="close-centered", className="ml-auto"
                   )
                   dbc.Button(
                       "External Link", id="link-centered", className="ml-auto"
                   )
               ),
           ],
           id="modal-centered",
           centered=True,
       ),
   ]
)


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

where the External Link button will open a new tab in your browser and navigate to another website, but I'm not sure. Any help and advice is very appreciated, thank you!

Upvotes: 1

Views: 3714

Answers (1)

coralvanda
coralvanda

Reputation: 6596

This is the page you need from the docs. Just add an href property to your button. So you would have something like:

dbc.Button(
    "External Link",
    id="link-centered", 
    className="ml-auto",
    href='https://en.wikipedia.org/wiki/Main_Page'
)

Upvotes: 1

Related Questions