Javascript Window.onclick在模式框中不工作

我在php foreach循环中有一个html模式框。我使用javascript通过onclick事件显示和隐藏模式框。问题是显示和隐藏函数的bot my onclick事件正在工作，但当我单击模式框外的窗口时，它并没有隐藏模式框

我想这可能是因为我在php循环中打印了几个模式框，javascript不知道关闭哪个模式框

我只想关闭所有的模式框，但不知道如何完成它

提前谢谢

我的javascript：

<script>
// Get the modal
var currentIndex;
var modal = document.getElementsByClassName('myModal');

// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close");

// When the user clicks the button, open the modal 
    function display(index) {
            modal[index].style.display = "block";
        currentIndex = index;
    } 

function notdisplay(index){
        modal[index].style.display = "none";

    }

// When the user clicks on <span> (x), close the modal

// When the user clicks anywhere outside of the modal, close it


window.onclick = function(event) {
    if (event.target == modal[currentIndex]) {
        modal.style.display = "none";
    }
}

</script>

//获取模态
var电流指数；
var modal=document.getElementsByClassName（'myModal'）；
//获取打开模式对话框的按钮
var btn=document.getElementsByClassName（“myBtn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）；
//当用户单击该按钮时，打开模式对话框
功能显示（索引）{
模态[索引].style.display=“块”；
currentIndex=索引；
} 
功能显示（索引）{
模态[索引].style.display=“无”；
}
//当用户单击（x）时，关闭模式对话框
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
if（event.target==模态[currentIndex]）{
modal.style.display=“无”；
}
}

php循环中的我的模式框：

<div class="col-md-7 offset-md-2 myBtn" onclick="display('.$index.')" style="margin-left:20px;">
<span onclick="notdisplay('.$index.')" class="close">&times;</span>

&时代；

您可以通过声明脚本的全局变量（比如var currentIndex）来访问索引。然后内部显示（index）方法将全局变量更改为index

var currentIndex;
function display(index) {
        modal[index].style.display = "block";
        currentIndex = index;

} 

然后在window.onclick函数中，您可以访问currentIndex

window.onclick = function(event) {

    if (event.target == modal[currentIndex]) {
        modal.style.display = "none";
    }
}

---

您可以通过声明脚本的全局变量（比如var currentIndex）来访问索引。然后内部显示（index）方法将全局变量更改为index

var currentIndex;
function display(index) {
        modal[index].style.display = "block";
        currentIndex = index;

} 

然后在window.onclick函数中，您可以访问currentIndex

window.onclick = function(event) {

    if (event.target == modal[currentIndex]) {
        modal.style.display = "none";
    }
}

---

modal[index].style.display

vs

modal.style.display

发现差异我也尝试过modal[index]，但由于未定义索引，因此会引发未定义索引的错误。谢谢，是的，因为您没有提供索引。这就是你需要做的，或者干脆全部关闭。我试图全部关闭，但每次尝试都失败了。

modal[index].style.display

vs

modal.style.display

找出差异我也尝试过modal[index]，但由于未定义索引，它会抛出一个未定义索引的错误。谢谢，是的，因为您没有为它提供索引。这就是你需要做的，或者干脆全部关闭。我试图全部关闭，但每次尝试都失败了。但是，问题是，当我在window.onclick函数中实现这个答案时，它不起作用。display的属性未定义是控制台中的错误。您声明全局变量后，不必在window.onclick函数中传递它。我已经按照您希望的方式更新了，但仍然得到错误？但是，问题是，当我在window.onclick函数中实现这个答案时，它不起作用。display的属性未定义是控制台中的错误吗？声明全局变量后，您不必在window.onclick函数中传递它。我已经按照您想要的方式更新了，但仍然有错误？