Create a modal window. I’m implementing something similar in my application. Here is the basic gist of it:
def modal():
return html.Div(
children=[
html.Div([
html.Div(
className='modal-text',
children=[
dcc.Markdown(dedent('''
# This is the text that will be in the modal
'''))
]
),
],
id='modal',
className='modal',
style={"display": "none"},
)
And then here is the callbacks to open and close it:
# hide/show modal
@app.callback(Output('modal', 'style'),
[Input('instructions-button', 'n_clicks')])
def show_modal(n):
if n > 0:
return {"display": "block"}
return {"display": "none"}
# Close modal by resetting info_button click to 0
@app.callback(Output('instructions-button', 'n_clicks'),
[Input('modal-close-button', 'n_clicks')])
def close_modal(n):
return 0