Javascript 莫代尔不再关门了

我不经常编码，已经有一段时间了。我目前正在为我的新公司建立一个网站，我借用了一个带有modals的竞争网站的想法。模态工作得很好，打开和关闭，我做了更多，现在它不再关闭了，打开很顺利，关闭不？我肯定这是个愚蠢的错误，但请跟我坦白，怎么才能把它关上`

//获取模式
var modal=document.getElementsByClassName（'modal'）；
//获取打开模式对话框的按钮
var btn=document.getElementsByClassName（“课程链接”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）；
//当用户单击该按钮时，打开模式对话框
btn[0]。onclick=function（）{
模态[0]。style.display=“块”；
}
btn[1]。onclick=function（）{
模态[1]。style.display=“块”；
}
btn[2]。onclick=function（）{
模态[2]。style.display=“块”；
}
btn[3]。onclick=function（）{
模态[3]。style.display=“块”；
}
btn[4]。onclick=function（）{
模态[4]。style.display=“块”；
}
btn[5]。onclick=function（）{
模态[5]。style.display=“块”；
}
btn[6]。onclick=function（）{
模态[6]。style.display=“块”；
}
btn[7]。onclick=function（）{
模态[7]。style.display=“块”；
}
btn[8]。onclick=function（）{
模态[8]。style.display=“块”；
}
btn[9]。onclick=function（）{
模态[9]。style.display=“块”；
}
btn[10]。onclick=function（）{
模态[10]。style.display=“块”；
}
//当用户单击（x）时，关闭模式对话框
span[0]。onclick=function（）{
模态[0]。style.display=“无”；
}
span[1]。onclick=function（）{
模态[1]。style.display=“无”；
}
span[3]。onclick=function（）{
模态[3]。style.display=“无”；
}
span[4]。onclick=function（）{
模态[4]。style.display=“无”；
}
span[5]。onclick=function（）{
模态[5]。style.display=“无”；
}
span[6]。onclick=function（）{
模态[6]。style.display=“无”；
}
span[7]。onclick=function（）{
模态[7]。style.display=“无”；
}
span[8]。onclick=function（）{
模态[8]。style.display=“无”；
}
span[9]。onclick=function（）{
模态[9]。style.display=“无”；
}
span[10]。onclick=function（）{
模态[10]。style.display=“无”；
}
//当用户单击模式之外的任何位置时，将其关闭
window.onclick=函数（事件）{
如果（event.target==模态[0]）{
模态[0]。style.display=“无”；
}
如果（event.target==模态[1]）{
模态[1]。style.display=“无”；
}  
如果（event.target==模态[2]）{
模态[2]。style.display=“无”；
}  
如果（event.target==模态[3]）{
模态[3]。style.display=“无”；
}  
if（event.target==模态[4]）{
模态[4]。style.display=“无”；
}  
如果（event.target==模态[5]）{
模态[5]。style.display=“无”；
}  
if（event.target==模态[6]）{
模态[6]。style.display=“无”；
}  
如果（event.target==模态[7]）{
模态[7]。style.display=“无”；
}  
如果（event.target==模态[8]）{
模态[8]。style.display=“无”；
}  
如果（event.target==模态[9]）{
模态[9]。style.display=“无”；
}  
如果（event.target==模态[10]）{
模态[10]。style.display=“无”；
}  
}

&时代；


海洋生物

您的代码可以简化一点以避免重复，例如使用

for

循环：

//获取模式
var modal=document.getElementsByClassName（'modal'）；
//获取打开模式对话框的按钮
var btn=document.getElementsByClassName（“课程链接”）；
//获取关闭模态的元素
var span=document.getElementsByClassName（“关闭”）；
for（设i=0；i

.model{位置：固定；顶部：0；左侧：0；宽度：100%；高度：100%；背景：rgba（0,0,0,3）；显示：无；}
.modal内容{背景：#fff；边距：1em自动；最大宽度：300px；填充：1em；}
.close{float:right；cursor:pointer；}
.course链接{光标：指针；填充：5px；背景：#eceded；显示：内联块；边距：.2em；}

&时代 模态内容0

开放模式0
&时代 模态内容1

开放式模式1
&时代 模态内容2

开放式模式2
&时代 模态内容3

开放式模式3
&时代 模态内容4

开放式模式4
&时代 模态内容5

打开模式5我不知道你的代码有什么问题，但是你的方法不正确。首先，使用索引是个坏主意。我建议您使用下面3个选项之一：

其次，使用按钮，而不是“a”

如果可能，将每个模式及其关闭按钮放在同一个父模式中。然后：
如果不同时打开多个模态，请创建一个关闭按钮并使用它关闭打开模态。为此，请向打开的模型添加一个类：
如果前两个不适用，请使用公共类或数据属性来匹配模态和按钮：
通过这样做，您可以用更少的代码控制打开样式。
通常使用内联事件处理程序。这是一个有用的例子


//一个处理程序代表所有
文档。添加的列表器（“单击”，句柄）；
函数句柄（evt）{
常量原点=evt.target；
if（origin.dataset.modalshow）{
//         ∟ 仅当元素包含[data modalshow]时才执行操作
返回显示模式(
D
document.querySelectorAll(".course-link").forEach(btn => {
  btn.addEventListener('click', () => {
    let modal = btn.closest(".parent-class").querySelector(".modal");
    modal.style.display = "none"
    modal.classList.remove('is-opened')
  });
})

document.querySelector(".course-link").addEventListener('click', () => {
  document.querySelector(".modal.is-opened").style.display = "none"
})

<div id="myModal" class="modal" data-name="something"></div>
<button class="course-link" data-target="something"></button>

document.querySelectorAll(".course-link").forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelector(`.modal[data-name="${btn.dataset.target}"]`).style.display = "none"
  });
})

.modal {
  display: none;
}

.modal.is-opened {
   display: block;
}