【发布时间】：2021-07-16 01:25:30
【问题描述】：
我正在努力在我的 Django 应用程序中实现基于 codepen javascript 的覆盖模式。 This codepen 包含我的模态的 HTML、CSS 和 Javascript 代码，并且是功能性的。正如您在我在下面发布的 HTML 中看到的那样，我有一个简单的页面，用户可以在其中查看捐赠，如果他们想查看它，可以单击查看按钮。单击此按钮时，我想在 codepen 中显示一个叠加层，但它不起作用。我不知道为什么。我将所有正确的 id 和类分配给元素，但我的程序没有做任何事情。可以请一些专家帮忙:)？我的 html 在下面。
{% extends 'suppliesbase.html' %}
{% load static %}
{% block content %}
<div class="row">
{% for donation in donations %}
<div class="col-lg-4">
<img class="thumbnail" src="{{donation.imageURL}}">
<div class="box-element product">
<h6><strong>{{donation.title}}</strong></h6>
<hr>
<a class="btn btn-outline-success" id="openModalBtn" href="#">View</a>
<h4 style="display: inline-block; float: right"><strong>Free!</strong></h4>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
<div id="modal-overlay">
<div id="modal">
<div class="head">
<a id="close-modal-button" href="javascript:;"></a>
</div>
<div class="content">Modal content</div>
</div>
</div>
<script src="scripts.js"></script>
如果您有任何问题，请与我们联系。谢谢。
更新：
{% extends 'suppliesbase.html' %}
{% load static %}
{% block content %}
<div class="row">
{% for donation in donations %}
<div class="col-lg-4">
<img class="thumbnail" src="{{donation.imageURL}}">
<div class="box-element product">
<h6><strong>{{donation.title}}</strong></h6>
<hr>
<button class="btn btn-outline-success" id="openModalBtn" href="#">View</button>
<h4 style="display: inline-block; float: right"><strong>Free!</strong></h4>
</div>
</div>
{% endfor %}
</div>
<!--Modal Overlay Content -->
<div id="modal-overlay">
<div id="modal">
<div class="head">
<a id="close-modal-button" href="javascript:;"></a>
</div>
<div class="content">Modal content</div>
</div>
</div>
<script>
var openModalButton = document.getElementById("open-modal-button");
var closeModalButton = document.getElementById("close-modal-button");
var modalOverlay = document.getElementById("modal-overlay");
var modal = document.getElementById("modal");
// function that open modal and display the overlay
openModalButton.addEventListener("click", event => {
modalOverlay.classList.add("modal-overlay-visible");
modal.classList.add("modal-visible");
});
// function that closes the modal and remove the overlay
closeModalButton.addEventListener("click", event => {
modalOverlay.classList.remove("modal-overlay-visible");
modal.classList.remove("modal-visible");
});
</script>
{% endblock content %}
【问题讨论】：
标签： javascript html css django