模态按钮在破折号python中不起作用答案

【问题标题】：Modal button is not working in dash python模态按钮在破折号python中不起作用
【发布时间】：2020-06-26 08:40:27
【问题描述】：

我想将按钮放在下面设计的 graph1 上。但是单击时“打开模式”按钮不起作用。我有以下代码：-

app.layout = html.Div(style={'backgroundColor': 'black'}, children=[
     html.H1('This is the header',style={'textAlign': 'center','color': 'yellow','font-family': 'Quicksand','font_size': '50px'}),
     html.Div(id='div1',style={'width': '49%', 'display': 'inline-block','background_color':'black'}, children=[            
     dbc.Button("Open modal", id="open"),
     dbc.Modal(
         [
             dbc.ModalHeader("Header"),
             dbc.ModalBody("This is the content of the modal"),
             dbc.ModalFooter(
                 dbc.Button("Close", id="close", className="ml-auto")
             ),
         ],
         id="modal",
    ),
 dcc.Graph(id='graph1', figure={'layout':layout},style={'display':'none'})])])
    
    
    @app.callback(
        Output("modal-sm", "is_open"),
        [Input("open-sm", "n_clicks"), Input("close-sm", "n_clicks")],
        [State("modal", "is_open")],
        )
    def toggle_modal(n1, n2, is_open):
        if n1 or n2:
            return not is_open
        return is_open

如果这里有任何问题，您能建议一下吗？

【问题讨论】：

你能发布完整的代码吗？否则，它必须调试您的问题。
回调的输入是带有id=open-sm 和id=close-sm 的元素。这些应该改为id=open 和id=close 以匹配两个按钮的ids？

标签： python-3.x button plotly-dash

【解决方案1】：

正如 ncasale 所说，您的回调中的 id 与模态按钮的 id 不匹配。此外，状态 'modal' 应更改为 'modal-sm'

请在下面查看您的代码并进行上述更正：

import dash_bootstrap_components as dbc
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash()
server = app.server

app.layout = html.Div(style={'backgroundColor': 'black'}, children=[
     html.H1('This is the header',style={'textAlign': 'center','color': 'yellow','font-family': 'Quicksand','font_size': '50px'}),
     html.Div(id='div1',style={'width': '49%', 'display': 'inline-block','background_color':'black'}, children=[            
     dbc.Button("Open modal", id="open-sm"),
     dbc.Modal(
         [
             dbc.ModalHeader("Header"),
             dbc.ModalBody("This is the content of the modal"),
             dbc.ModalFooter(
                 dbc.Button("Close", id="close-sm", className="ml-auto")
             ),
         ],
         id="modal-sm",
    ),
    #dcc.Graph(id='graph1', figure={'layout':layout},style={'display':'none'})
    ])])
    
    
@app.callback(
    Output("modal-sm", "is_open"),
    [Input("open-sm", "n_clicks"), Input("close-sm", "n_clicks")],
    [State("modal-sm", "is_open")],
    )
def toggle_modal(n1, n2, is_open):
    if n1 or n2:
        return not is_open
    return is_open


if __name__ == '__main__':
    app.run_server(debug=True)

【讨论】：