Question

我在php foreach循环中有一个html模式框。我使用javascript通过使用onclick事件显示和隐藏模态框。问题是我的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>

我在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>

Answer 1

您可以通过声明脚本的全局变量（让我们说var currentIndex）来授予对索引的访问权限。然后在display（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";
    }
}

Window.onclick无法在模态框中工作

1 个答案: