Any way to create an instructions popout?

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

3 Likes