Javascript 点击按钮后，我的模式不会弹出

我按照w3schools教程学习modals，但当我点击按钮时，什么也没发生。实际上，我已经学习了前面的两个模态教程，在每一个教程中，当我单击按钮时都不会发生任何事情。我已经检查了外部js文件是否正常工作

$（窗口）.on（'scroll'，function（）{
如果（$（窗口）.scrollTop（））{
$（'nav'）.addClass（'black'）；
}否则{
$（'nav'）.removeClass（'black'）；
}
})
$（文档）.ready（函数（）{
$（“.menu h4”）。单击（函数（）{
$（“nav ul”）。切换类别（“活动”）
})
})
//模态
var modal=document.getElementsByClassName（'modal-container'）；
//获取打开模式对话框的按钮
var btn=document.getElementsByClassName（“模态btn”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
模态[0]。style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

点击我
&时代；
情态动词中的某些文本

GetElementsByCassName返回一个类似于数组的对象（NodeList），并且不会像预期的那样返回单个元素

getElementById返回一个元素，这就是模态函数应该使用的元素

$（窗口）.on（'scroll'，function（）{
如果（$（窗口）.scrollTop（））{
$（'nav'）.addClass（'black'）；
}否则{
$（'nav'）.removeClass（'black'）；
}
})
$（文档）.ready（函数（）{
$（“.menu h4”）。单击（函数（）{
$（“nav ul”）。切换类别（“活动”）
})
})
//模态
var modal=document.getElementsByClassName（'modal-container'）[0]；
//获取打开模式对话框的按钮
var btn=document.getElementsByClassName（“模态btn”）[0]；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）[0]；
//当用户单击该按钮时，打开模式对话框
btn.onclick=函数（）{
modal.style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span.onclick=函数（）{
modal.style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
}
}

点击我
&时代；
情态动词中的某些文本

在注释

//modal

上方有一个额外字符

。也许这就是问题的根源。检查浏览器控制台，如果有任何错误，将记录在控制台上。您还需要JQuery，因此请确保在代码中导入它。您是否导入了JQuery CDN或用于获取JQuery的任何内容？这个例子是有效的，它基本上是你的code@Yousaf很抱歉这个额外的字符是堆栈溢出缩进符号。这不是我的真实想法code@AmoghDixit我已经导入了Jquery CDN。我的网站正在为导航栏使用jquery，这很好。