jquery - 如何在 django 中使用引导程序制作模态显示

Question

我有一个包含列表的模态，在单击按钮上它必须显示问题是，一旦我单击按钮，模态不会显示，而是显示阴影

我知道默认情况下模式是隐藏的，我需要 jquery 才能使其显示和显示其内容。

update2.html

<div class="modal fade" id="modalCart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!--Header-->
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Your Result</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <!--Body-->
      <div class="modal-body">

        <table class="table table-hover">
          <thead>
            <tr>
                <th>ID</th>
                <th>Number</th>
                <th>Title</th>
                <th>Type</th>
                <th>Content</th>
                <th>User</th>
            </tr>
          </thead>
          <tbody>
            {% for folder in FilterRecords %}
            <tr align="center">
                <td>{{ folder.id }}</td>
                <td>{{ folder.FolderNum }}</td>
                <td>{{ folder.FolderTitle }}</td>
                <td>{{ folder.Type }}</td>
                <td>{{ folder.Content }}</td>
                <td>{{ folder.user}}</td>
            </tr>
            {% endfor %}

          </tbody>
        </table>

      </div>
      <!--Footer-->
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
        <button class="btn btn-primary">Checkout</button>
      </div>
    </div>
  </div>
</div>

base.html

<form class="form-inline" id = "folderSearch" method="GET" action="{% url 'search_folder' %}">
                    <input class="form-control mr-sm-2" type="text" placeholder="عما تبحث؟" name="searchFolder" value="{{request.GET.searchFolder}}">

           {%include 'blog/update2.html' %}
            <a href="{% url 'update2'%}" class=" btn btn-danger confirm-search" title="Search" data-toggle="modal" data-target="#modalCart" id="searchButton">search </a>
</form>

    <script type="text/javascript">
  $(document).ready(function(){    
    $(document).on('click', '.confirm-search', function () {
      $('#modalCart').modal('show');
    });

  })

    </script>

标签： jquerydjangomodal-dialog