I fumbled together a working modal using CSS and the existing stuff. Not as clean as a javascript implementation of it (screen still scrolls and no animations) but it works.
# -*- coding: utf-8 -*-
import dash
import dash_html_components as html
from dash.dependencies import Input, Output, State, Event
import logging
def main():
# Disable Flask's get/post console logs
log = logging.getLogger('werkzeug')
#log.disabled = True
app = dash.Dash()
app.config['suppress_callback_exceptions']=True
app.scripts.config.serve_locally = True
app.layout = html.Div(children=[
html.Div([
html.Button('Get', className="info-button", n_clicks=0, id='info-button'),
], className="info-button-div"),
##### DETAILED INFO MODAL ######
html.Div([
html.Div([
html.Label('JUST SOME TEXT: ')
], className="text-div"),
html.Div([
html.Button('Close', className="close-button", n_clicks=0, id='close-button'),
], className="close-button-div"),
], className="modal-container", id="modal-container", style={'display': 'none'}),
##### MODAL BACKDROP ######
html.Div([
], className="modal-backdrop", id="modal-backdrop", style={'display': 'none'}),
html.Div(id='modal-button-values', children="Get:0 Close:0 last:Close", style={'display': 'none'}),
])
###########################
###### MODAL CONTROL ######
###########################
@app.callback(Output('modal-button-values', 'children'),
[Input('info-button', 'n_clicks'), Input('close-button', 'n_clicks')],
[State('modal-button-values', 'children')],[])
def modal_button_status(get_clicks, close_clicks, button_values):
button_values = dict([i.split(':') for i in button_values.split(' ')])
if get_clicks > int(button_values["Get"]):
last_clicked = "Get"
elif close_clicks > int(button_values["Close"]):
last_clicked = "Close"
else:
last_clicked = "Close"
return "Get:{0} Close:{1} last:{2}".format(get_clicks, close_clicks, last_clicked)
@app.callback(Output('modal-container', 'style'),
[Input('modal-button-values', 'children')],
[],[])
def modal_display_status(button_values):
button_values = dict([i.split(':') for i in button_values.split(' ')])
if button_values["last"] == 'Get':
return {'display': 'inline'}
else:
return {'display': 'none'}
@app.callback(Output('modal-backdrop', 'style'),
[Input('modal-button-values', 'children')],
[],[])
def modal_backdrop_status(button_values):
button_values = dict([i.split(':') for i in button_values.split(' ')])
if button_values["last"] == 'Get':
return {'display': 'inline'}
else:
return {'display': 'none'}
external_css = ["https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css",
"https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i",
"https://codepen.io/cryptocss/pen/geyPdg.css",
"https://fonts.googleapis.com/css?family=Product+Sans:400,400i,700,700i",]
for css in external_css:
app.css.append_css({"external_url": css})
app.run_server(debug=False)
if __name__ == '__main__':
main()
CSS portion (also found in the codepen link:
.modal-container {
opacity: 1;
background-color: #fff;
max-width: 400px;
width: 400px;
padding: 10px 30px;
position: fixed;
left: calc(50% - 200px);
top: 12%;
border-radius: 4px;
z-index: 10001;
pointer-events: auto;
cursor: auto;
visibility: visible;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.6);
}
.modal-container .close-button-div{
float: right;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.6);
width: 100vw;
height: 100vh;
position: fixed;
left: 0;
top: 0;
z-index: 10000;
visibility: visible;
}
There was also a javascript one that someone implemented here but I couldn’t figure out how to get working because I couldn’t figure out the custom packages for Dash. :\
https://github.com/StratoDem/sd-material-ui
Would be great to see the integration of some of these more commonly used web features as Dash Core Components.