Javascript 模态滑动与开启

我已经创建了两个模态，我不确定如何使它们都用同一个按钮关闭。第一个模态可以关闭，但是第二个模态根本无法关闭

我还希望给他们一个动画，让他们滑进滑出。但是，我不知道如何将它添加到我已经创建的代码中。有人能建议我怎么做吗

document.getElementById（'project-1'）。addEventListener（“单击”，函数（）{
document.querySelector（'.side model'）.style.display=“flex”；
});
document.getElementById（'project-2'）。addEventListener（“单击”，函数（）{
document.querySelector（'.side model.second'）.style.display=“flex”；
});
document.querySelector（'.close-side-model'）。addEventListener（“单击”，函数（）{
document.querySelector（'.side model、.side model.second'）.style.display=“无”；
});
.side模式{
宽度：35%；
位置：固定；
身高：100%；
背景色：#fff；
排名：0；
右：0；
底部：0；
对齐项目：居中；
证明内容：中心；
-moz盒阴影：0px 0px 20px 0px rgba（0,0,0,0.1）；
-webkit盒阴影：0px 0px 20px 0px rgba（0,0,0,0.1）；
盒影：0px 0px 20px 0px rgba（0,0,0,0.1）；
显示：无；
}
.侧面模态.模态内容{
身高：100%；
宽度：未设置；
}
.侧面模态，关闭{
颜色：#000！重要；
}
.按钮{
字体大小：15px；
颜色：#000；
}
.结束{
字体大小：40px；
颜色：#fff；
变换：旋转（45度）；
位置：绝对位置；
右：20px；
顶部：0px；
字号：200；
光标：指针；
}

第一模态
+
第二模态
+
您的问题是没有针对所有“关闭”元素

可以使用以类的所有元素为目标，并循环遍历所有元素

诸如此类：


//打开按钮
document.querySelectorAll（'a.button'）.forEach（函数（按钮））{
按钮。addEventListener（“单击”，函数（elm）{
var modal=button.getAttribute（“modal”）；
document.querySelector（model.style.display=“block”；
});
});
//关闭按钮
document.querySelectorAll（'div.close'）.forEach（函数（close））{
close.addEventListener（“单击”，函数（）{
document.querySelectorAll（'.side modal'）.forEach（函数（modal）{
modal.style.display=“无”；
});
});
});
.side模式{
宽度：35%；
位置：固定；
身高：100%；
背景色：#fff；
排名：0；
右：0；
底部：0；
对齐项目：居中；
证明内容：中心；
-moz盒阴影：0px 0px 20px 0px rgba（0,0,0,0.1）；
-webkit盒阴影：0px 0px 20px 0px rgba（0,0,0,0.1）；
盒影：0px 0px 20px 0px rgba（0,0,0,0.1）；
显示：无；
}
.侧面模态.模态内容{
身高：100%；
宽度：未设置；
}
.侧面模态，关闭{
颜色：#000！重要；
}
.按钮{
字体大小：15px；
颜色：#000；
}
.结束{
字体大小：40px；
颜色：#fff；
变换：旋转（45度）；
位置：绝对位置；
右：20px；
顶部：0px；
字号：200；
光标：指针；
}

第一模态
+
第二模态
+
太好了，谢谢。你知道我会如何使用javascript应用幻灯片的左右移动吗？