我如何关闭模态？代码正在运行，但现在却没有。

Question

我正在创建一个投资组合网站，并希望找到一个表格，其中包含我以前参与过的项目。我们的想法是创建一个缩略图网格，当您单击图像时，将以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">&times;</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">&times;</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">&times;</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>