我試圖在外部單擊時關(guān)閉模式。我嘗試循環(huán)瀏覽模態(tài)，但無法讓它們將其顯示設(shè)置為無。這是我的 HTML：<div class="projects">            <div data-modal="modal1">                <div>                      <p>Coffee</p>                </div>                <img src="img/coffee.png" alt="">            </div>            <div data-modal="modal2">                <div>                       <p>Tea</p>                </div>                <img src="img/tea.png" alt="">            </div>      </div><div class="project-card" id="modal1">            <button class="close">X</button>        <div class="overlay">            <img src="img/coffee.png" alt="">        </div></div>        <div class="project-card" id="modal2">            <button class="close">X</button>        <div class="overlay">            <img src="img/tea.png" alt="">        </div></div>這是我打開模式的代碼。const coffeeGrounds = document.querySelectorAll('.projects > div[data-modal^=modal]');for (var i = 0; i < coffeeGrounds.length; i++) {    coffeeGrounds[i].addEventListener('click', function () {        var x = this.getAttribute('data-modal');        var a = document.getElementById(x);        a.setAttribute('style','display:block');           });}這是我的代碼，當(dāng)在外部單擊以關(guān)閉模式時：window.addEventListener('click',function(){       for(var i = 0; i<coffeeGrounds.length; i++){         var x = coffeeGrounds[i].getAttribute('data-modal');             var a = document.getElementById(x);                console.log(a);                if(a.style.display === 'block'){                      a.setAttribute('style','display:none');                 }             }        });在這里將模態(tài)顯示設(shè)置為無。它也阻止顯示模式。請?zhí)峁┤魏螏椭?，我們將不勝感激。代碼筆： https: //codepen.io/zaidik/pen/bGwpzbE