Bootstrap 模式打不开

Question

我对我一直用来查看数据的模态有一些疑问，我的问题是，当它在同一个 HTML 中时，它会打开模态，当它是另一个 HTML 时，它会给出错误。

网址.py

    path("modalview/<int:prescription_id>", views.modalview, name="modalview"),

主.html

    <table class="table table-striped table-bordered border-primary" id="patientTable" >
        <tbody>
            {% for appointment in appointments %}
                <tr>
                    <td><p>Appointment Number: {{ appointment.id }}</p></td>
                </tr>
                <tr>
                    <td><p>Doctor Name: {{ appointment.doctor }}</p></td>
                </tr>
                <tr>
                    <td><p>Appointment Date: {{appointment.date}}, {{ appointment.time }}</p></td>
                </tr>
            {% endfor %}
            {% for prescription in prescriptions %}
                <tr> 
                    <td> <button type="button" class="btn btn-primary"  data-toggle="modal" data-target="#exampleModal"   data-ajaxurl="{% url 'modalview' prescription.id }}">     Open modal     </button></td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

查看.py

def modalview(request, prescription_id):
    prescription = Prescription.objects.get(id = prescription_id)
    context={
        'prescription': prescription
    }
    return render(request, "ClinicMan/modalview.html", context)

模态视图.html

{% load static %}

{% block body %}

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <div class="mb-3">
                <label for="message-text" class="col-form-label"><p>Symptoms: {{ prescription.symptoms }}</p></label>
            </div>
            <div class="mb-3">
              <label for="recipient-name" class="col-form-label"><p>Prescription: {{ prescription.prescription }}</p></label>
            </div>
            <div class="mb-3">
              <label for="message-text" class="col-form-label"><p>Appointment Date: {{ prescription.date }}</p></label>
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

  {% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'ClinicMan/script.js' %}"></script>
{% endblock %}

脚本.js

$('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget) // Button that triggered the modal
    var ajaxUrl = button.data('ajaxurl') // Extract info from data-* attributes
    
    $('#exampleModal-content').load(ajaxUrl)
  })

出于这个原因，我想知道我编写代码的方式是否正确，或者是否缺少某些内容。

我在同一页面上用模式测试了它，只传递了一个 id，它就打开了，但是，以这种方式，它并没有结束。

我试过了，但他只告诉我，我试过你提到的两种方式，首先将 modalview 放在主页上，然后按照你提到的方式放置

enter image description here

Answer 1

为了使模态起作用，必须满足以下条件：

第一页（main.html）必须引用调用模态（script.js）的脚本。否则当你想在按钮按下时使用它时它不存在。

填充模态内容 ('#exampleModal-content') 的元素也必须在第一页 (main.html) 上，否则页面的文档对象模型 (DOM) 中没有任何地方可以调用页面内容。目前您没有 ID 为该名称的元素。您确实有#example-modal，但它也不在第一页（main.html）上，因此它不会像您当前拥有的那样工作。

主.html

 ...
 </table>

 <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div id="exampleModal-content">
      </div>
 </div>

   {% block script %}
    <!-- move this to main.html so that the button can see it -->>
    <script type="text/javascript" src="{% static 'ClinicMan/script.js' %}"></script>
{% endblock %}

模态视图.html

<!-- we've removed the top div so the main.html template knows where to put things -->
{% load static %}
{% block body %}
    <div class="modal-dialog">