我正在创建一个投资组合网站，并希望找到一个表格，其中包含我以前参与过的项目。我们的想法是创建一个缩略图网格，当您单击图像时，将以PDF格式打开一个模式。一切都在努力，除了我无法关闭模态。关闭模态的脚本之前正在工作，但我不确定发生了什么。不是＆＃39; X＆＃39;也没有点击窗外工作。有任何想法吗？
<td><!-- AGNES HAMERLIK PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="agnes"><img src="../images/projectImages/agnes_thumbnail.png" height="250" width="auto" alt="Agnes Hamerlik Thumbnail"></button>
<!-- The Modal -->
<div id="agnesModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/AgnesHamerlikPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Agnes Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just <a href="projectFiles/AgnesHamerlikPresentation.pdf">click here to download the PDF file.</a>
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var agnesModal = document.getElementById("agnesModal");
// Get the button that opens the modal
var agnesBtn = document.getElementById("agnes");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
agnesBtn.onclick = function() {
agnesModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
agnesModal.closeModal();
//agnesModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == agnesModal) {
agnesModal.style.display = "none";
}
}
</script>
</td>
<td><!-- VAN DOREN PROJECT -->
<!-- Trigger/Open The Modal -->
<button id="vandoren"><img src="../images/projectImages/vandoren_thumbnail.png" height="250" width="auto" alt="Van Doren Thumbnail"></button>
<!-- The Modal -->
<div id="vandorenModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/VanDorenPresentation.pdf" type="application/pdf" width="100%" height="400" alt="Van Doren Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just <a href="projectFiles/VanDorenPresentation.pdf">click here to download the PDF file.</a>
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var vandorenModal = document.getElementById('vandorenModal');
// Get the button that opens the modal
var vandorenBtn = document.getElementById("vandoren");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
vandorenBtn.onclick = function() {
vandorenModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
vandorenModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vandorenModalModal) {
vandorenModal.style.display = "none";
}
}
</script>
</td>
</tr>
<tr>
<td><!-- Platinum Sales Group Project -->
<!-- Trigger/Open The Modal -->
<button id="psg"><img src="../images/projectImages/psg_thumbnail.png" height="250" width="auto" alt="Platinum Sales Group Thumbnail"></button>
<!-- The Modal -->
<div id="psgModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<object data="projectFiles/psgFINAL.pdf" type="application/pdf" width="100%" height="400" alt="Platinum Sales Group Presentation"></object>
<p>
It appears your Web browser is not configured to display PDF files. No worries, just <a href="psgFINAL.pdf">click here to download the PDF file.</a>
</p>
<p>Now to find out how to insert PDF of project </p>
</div>
</div>
<script>
// Get the modal
var psgModal = document.getElementById('psgModal');
// Get the button that opens the modal
var psgBtn = document.getElementById("psg");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");
// When the user clicks on the button, open the modal
psgBtn.onclick = function() {
psgModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
psgModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == psgModal) {
psgModal.style.display = "none";
}
}
</script>
</td>