Floating css modals for form options

Dash Python
5

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.