Question

我正在开发一个Flask应用程序，该应用程序的一页包含多个按钮，单击这些按钮时，我希望每个按钮都“确认-您确定吗？”弹出一个弹出窗口，然后转到另一个视图功能，该功能负责根据按钮运行作业。我一直在努力寻找一种方法，可以通过模态从按钮传递变量来运行视图功能。

这是我到目前为止尝试过的：

app.py：

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run/<cmd>', methods=['GET', 'POST'])
def run(cmd):
    return render_template_string('''
    cmd = {{ cmd }}<br>
''', cmd=cmd)

buttons.html：

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="utf-8">
 <script type="text/javascript">
 $(document).on("click", ".open-modal", function () {
 var mycmd = $(this).data('id');
 $(".modal-body #cmd").val( mycmd );
 $("#confirm-modal").modal("show");
<script>
</head>
<body>


        <form method="post" action="/">

          <button type="button" class="open-modal" data-toggle="modal" data-id="Test" data-target="#confirm_modal">Test</button>
          <button type="button" class="open-modal" data-toggle="modal" data-id="Test2" data-target="#confirm_modal">Test2</button>

        </div>
    </form>

    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
           <input type="hidden" name="cmd" id="cmd" value=""/>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run', cmd=cmd) }}" method="POST">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">

          </div>
        </div>
      </div>
    </div>

 </body>

在尝试添加模式之前，我在button.html内的一个表单中使用了一个提交按钮，在该按钮中，我将捕获按钮函数中按钮的值，并将变量传递给会话，然后使其运行功能。但是，模态要求触发器的按钮类型为“ button”，该触发器不会将任何内容发送回表单。我还研究了如何使用隐藏输入值或以某种方式传递来自其他HTML页面的模式。

对实现这项工作的最佳方法有何建议？以前，我有一个Confirm Delete模态，其中我只是将modal的确认按钮包装在具有url_for形式的表单中，所以我认为这不会那么复杂。不幸的是，我不太熟悉Java脚本。任何帮助深表感谢！

Answer 1

在Jessi的帮助下-这以问题中描述的方式解决。

buttons.html：

  <!-- Trigger buttons for modal-->
  <a data-toggle="modal" class="btn btn-primary" id="Test" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test</a> &nbsp;
  <a data-toggle="modal" class="btn btn-primary" id="Test2" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test2</a> &nbsp;


    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run') }}" method="POST">
            <input name="pass_value" type="hidden" value="pass_value" id="hidden_input">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">
          </div>
        </div>
      </div>
    </div>

    <script>
        function aPassValueFunction(obj){
            let valuefromID = obj.id;
            $('#hidden_input').val(valuefromID);
            $("#confirm-modal").modal("show");
        }
    </script>

app.py：

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run', methods=['GET', 'POST'])
def run():
  if request.method == 'POST':
    if request.form['pass_value'] == 'Test':
    value ='Test just for fools and horses!'
    return render_template_string('''{{ value }}<br>''')
  elif request.form['pass_value'] == 'Test2':
    value ='Test2'
    return render_template_string('''{{ value }}<br>''')

Answer 2

除了我在第一条评论中提供的链接之外，这是另一种方式。

<a data-toggle="modal" class="btn btn-primary"
   id="value_you_want_to_pass" value="btn_display_value"
   data-target="#your_modal"
   onclick="aTestFunction(this)">                    
</a> &nbsp;


<script>
    function aTestFunction(obj){
        let valuefromID = obj.id;
        $('#hidden_input').val(valuefromID);
    }
</script>

<!-- your modal starts here -->

<input type="hidden" id="hidden_input">
<!-- your modal ends here -->

通过这种方式，当您单击按钮时，将调用JS函数并将值分配给隐藏的输入，并且当模式打开时，您将能够在模式窗口中传递该值。如果要查看它，请删除隐藏的属性。

带多个按钮的烧瓶确认模式

2 个答案: