Question

我正在构建Flask App + Jinja2模板。在这个应用程序中，我有一个页面，其中有一个浮动操作按钮，它将展开以显示上传按钮。我想展示一个模型，其中包含一个表单来选择要上传的文件。

我已按照官方文档here查看了example，但仍然没有运气。

隐藏模态，但单击按钮时不显示模态。我错了什么？

<html>

     <head>
        <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"  media="screen,projection"/>
        <title>{{folder_name}}</title>
        <script>

  $(document).ready(function(){
    // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
    $('.modal-trigger').leanModal();


  });
          </script>
      </head>

    <body>
        {% include 'navbar.html' %}
        <table class="highlight">
          <thead>
            <tr>
              <th>Name</th>
              <th>Date Modified</th>
            </tr>
          </thead>

          <tbody>
            {% for file in files %}
            <tr>
              <td>{{file['name']}}</td>
              <td>{{file['modified']}}</td>

            </tr>
            {% endfor %}
          </tbody>
        </table>

        <div id="uploadModal" class="modal">
              <div class="modal-content">
                  <form action="#">
                    <div class="file-field input-field">
                      <div class="btn">
                        <span>File</span>
                        <input type="file" multiple>
                      </div>
                      <div class="file-path-wrapper">
                        <input class="file-path validate" type="text" placeholder="Upload one or more files">
                      </div>
                    </div>
                  </form>
              </div>
        </div>


        <div class="fixed-action-btn">
          <a class="btn-floating btn-large red">
            <i class="large material-icons">mode_edit</i>
          </a>
          <ul>
            <li><a class="btn-floating modal-trigger green" href="#uploadModal"><i class="material-icons">publish</i></a></li>
          </ul>
        </div>


    </body>


</html>

实现不与Flask + Jinja2模板一起使用的CSS模式

0 个答案: