我知道这个问题很常见，但我搜索了不同的解决方案，但还没有找到，有没有办法重用模态？与其在每个函数中制作不同的模态，为什么不将其重用为一个模态，有没有什么方法可以实现它，尤其是在 Django 中？ 我应该将它传输到 javascript 文件中吗？
我试过的是将 HTML 扩展到主文件，但它不起作用
modal.html 模板/modal.html
{% block modal_scripts %}
<div class="modal-onboarding modal fade animate__animated" id="onboardImageModal" tabindex="-1" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content text-center">
<div class="modal-header border-0">
<a class="text-muted close-label" href="javascript:void(0);" data-bs-dismiss="modal"
>Skip Intro</a
>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body p-0">
<div class="onboarding-media">
<div class="mx-2">
<img
src="../../assets/img/illustrations/girl-unlock-password-light.png"
alt="girl-unlock-password-light"
width="335"
class="img-fluid"
data-app-light-img="illustrations/girl-unlock-password-light.png"
data-app-dark-img="illustrations/girl-unlock-password-dark.png"
/>
</div>
</div>
<div class="onboarding-content mb-0">
<h4 class="onboarding-title text-body">Test</h4>
<div class="onboarding-info">
In this example you can see a form where you can request some additional information
from the customer when they land on the app page.
</div>
<form>
<div class="row">
<div class="col-sm-12">
<div class="mb-3">
<label for="roleEx3" class="form-label">Discount</label>
<select class="form-select" tabindex="0" id="roleEx3">
<option>Senior Citizen - 20%</option>
<option>Business Owner</option>
<option>Other</option>
</select>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="modal-footer border-0">
<button type="button" class="btn btn-label-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
{% endblock modal_scripts %}
mymainfile.html 管理员/mymainfile.html
{% extends 'index.html' %} {% block content %} {% load staticfiles %}
<html> ...some code of html here..... </html>
{% block modal_scripts %} {% csrf_token %} {% endblock modal_scripts %}
{% endblock %}
另一个选择是 include 某些 html 片段。
模板/modal.html：
<div class="modal-onboarding modal fade animate__animated" id="onboardImageModal" tabindex="-1" aria-hidden="true" >
<div class="modal-dialog" role="document">
<div class="modal-content text-center">
[...]
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
模板/example1.html
<h1>Hello world</h1>
{% include "modal.html" %}
模板/example2.html
<h1>Goodbye World</h1>
{% include "modal.html" %}