Javascript 模态变暗背景

我已经创建了一个滑动模式，但我不知道如何在模式滑出时使背景褪色和变暗

如果单击网站上的一个项目卡，您可以看到模型的实时预览

当你点击页面以外的任何地方时，我也试图关闭模式，但只能通过关闭按钮使其工作。有人能帮助我如何在这个模式下实现以下两件事吗

//关闭所有侧面模态的函数
功能侧模块关闭（）{
document.querySelectorAll（'.side modal'）.forEach（函数（modal）{
modal.style.right=“-600px”；
});
}
//用于显示单面模态的函数
功能侧\u模式\u打开（名称）{
var modal=document.querySelector（名称）；
modal.style.right=“0%”；
}
//打开按钮
document.querySelectorAll（'a.button'）.forEach（函数（按钮））{
按钮。addEventListener（“单击”，函数（elm）{
侧面模态闭合（）；
side_modal_open（button.getAttribute（“modal”））；
});
});
//关闭按钮
document.querySelectorAll（'div.close'）.forEach（函数（close））{
close.addEventListener（“单击”，函数（）{
侧面模态闭合（）；
});
});
。按钮{
文字装饰：无；
颜色：#000；
右边距：15px；
}
.侧面模态{
宽度：35%；
宽度：300px填充：40px；
位置：固定；
身高：100%；
溢出y：滚动；
背景色：#fff；
排名：0；
右图：-550px；
底部：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）；
显示：块；
过渡：所有的1容易；
}
.模态内容{
填充：20px；
}
.结束{
位置：绝对位置；
顶部：10px；
右：10px；
变换：旋转（45度）；
字号：20px
}

模态-1
+
模态-2
+
添加一个div或横跨全身的任何容器。在js
side\u modal\u open
和
side\u modals\u close
函数中，您可以添加/删除提供背景颜色的类

有用参考：

更新的代码片段-


//关闭所有侧面模态的函数
功能侧模块关闭（）{
document.querySelectorAll（'.side modal'）.forEach（函数（modal）{
modal.style.right=“-600px”；
});
document.getElementById（“覆盖”）.classList.remove（“暗标”）；
}
//用于显示单面模态的函数
功能侧\u模式\u打开（名称）{
var modal=document.querySelector（名称）；
modal.style.right=“0%”；
document.getElementById（“覆盖”）.classList.add（“暗标”）；
}
//打开按钮
document.querySelectorAll（'a.button'）.forEach（函数（按钮））{
按钮。addEventListener（“单击”，函数（elm）{
侧面模态闭合（）；
side_modal_open（button.getAttribute（“modal”））；
});
});
//关闭按钮
document.querySelectorAll（'div.close'）.forEach（函数（close））{
close.addEventListener（“单击”，函数（）{
侧面模态闭合（）；
});
});
*{
保证金：0；
}
.按钮{
文字装饰：无；
颜色：#000；
右边距：15px；
}
.侧面模态{
宽度：35%；
宽度：300px填充：40px；
位置：固定；
身高：100%；
溢出y：滚动；
背景色：#fff；
排名：0；
右图：-550px；
底部：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）；
显示：块；
过渡：所有的1容易；
}
.模态内容{
填充：20px；
}
.结束{
位置：绝对位置；
顶部：10px；
右：10px；
变换：旋转（45度）；
字号：20px
}
黑色的{
背景色：rgba（0,0,0,0.1）；
高度：100vh；
}

模态-1
+
模态-2
+
当modal打开时，使用相同的原则将类添加到div中