Javascript 如何根据元素id创建动态模式窗口？

我有一个带有目录的网站。我想做的是，一个模式窗口，当我点击产品卡时会打开，并有其他关于产品的信息和照片。我已经为所有产品制作了特殊的id，但我无法制作脚本。有没有简单的解决办法

还有我的全部代码

$（“.costs_js”）。单击（函数（）{
$（“.cl项”）.hide（）；
$（“.cloth”）.show（“fast”）；
$（“.boots”）.show（“fast”）；
});
$（“.hzt_js”）。单击（函数（）{
$（“.cl项”）.hide（）；
$（.cl item.ph”）.show（“fast”）；
$（.cl item.sl”）.show（“fast”）；
$（.cl item.tr”）.show（“fast”）；
});
$（“.pled_js”）。单击（函数（）{
$（“.cl项”）.hide（）；
$（.cl item.pled”）.show（“fast”）；
});
函数目录（）{
document.getElementById（“cg”）.style.display=“grid”；
document.getElementById（“cl”）.style.display=“grid”；
document.getElementById（“back btn”）.style.visibility=“visible”；
};
$（“.back btn”）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:$（“.cg dummy”）.offset（）.top}，
“慢”）；
});
//轻快启动
$（'.slideshow'）.flickity({
//选择权
cellAlign:'中心'，
包含：对，
总括：对，
自动播放：5000，
prevNextButtons:false，
单元格选择器：'.ss项'
});
/*----------------------------------------*\
#要领
\*----------------------------------------*/
：根{
--深蓝色：#34495e；
--绿色：#27ae60；
--阴影：0 0 30px 1px rgba（104，104，104，0.8）；
--b_绿色：3倍固态变量（--绿色）；
--橙色：#e67e22；
--渐变：线性渐变（至右下角，#00e5ff，#2ec71）；
--渐变阴影：线性渐变（rgba（0,0,0,0.3），rgba（0,0,0,0.3））
}
/*------------------
!颜色
------------------*/
.blue{背景色：#1078A4；}
.biruza{背景色：#00939A；}
.siren{背景色：#C13C8D；}
.malina{背景色：#E76F77；}
.corall{背景色：#E44440；}
.深蓝色{背景色：#24204A；}
.olive{背景色：#635836；}
baklajan{背景色：#503944；}
.grey{背景色：灰色；}
奶油先生{
背景色：#E9C4AA；
颜色：var（--深蓝色）；
}
.梯度{
背景：var（--梯度）；
颜色：var（--深蓝色）；
}
怀特先生{
背景色：白色；
颜色：var（--深蓝色）；
}
黄先生{
背景色：#FFCE65；
颜色：var（--深蓝色）；
}
/*------------------
!动画
------------------*/
@-webkit关键帧脉冲{
0% {
边框：3倍实心rgba（39174961）
}
50% {
边框：3倍实心rgba（39174960）；
}
100% {
边框：3倍实心rgba（39174961）；
}
}
@-o-关键帧脉冲{
0% {
边框：3倍实心rgba（39174961）
}
50% {
边框：3倍实心rgba（39174960）；
}
100% {
边框：3倍实心rgba（39174961）；
}
}
@-moz关键帧脉冲{
0% {
边框：3倍实心rgba（39174961）
}
50% {
边框：3倍实心rgba（39174960）；
}
100% {
边框：3倍实心rgba（39174961）；
}
}
@关键帧脉冲{
0% {
边框：3倍实心rgba（39174961）
}
50% {
边框：3倍实心rgba（39174960）；
}
100% {
边框：3倍实心rgba（39174961）；
}
}
/*------------------
!主要
------------------*/
身体{
保证金：0；
填充：0；
字体系列：“Roboto”，无衬线；
/*字体系列：“Pacifico”，草书*/
文本对齐：居中；
}
html，正文{
溢出x：隐藏；
-webkit字体平滑：抗锯齿；
}
* {
框大小：边框框；
}
img{
最大宽度：100%；
最大高度：100%；
}
.笨蛋{
可见性：隐藏；
}
/*----------------------------------------*\
#要领
\*----------------------------------------*/
navbar先生{
位置：相对位置；
排名：0；
显示：网格；
网格模板柱：1fr 1fr 1fr；
证明项目：中心；
对齐项目：居中；
宽度：100%；
填充：10px；
背景色：var（--深蓝色）；
}
.home btn a img{
保证金：0；
边框：3倍纯白；
最小宽度：180px；
最小高度：80px；
}
tr>td{
填充：3px0；
文本对齐：左对齐；
颜色：var（--绿色）；
字体大小：粗体；
}
td-img{
浮动：对；
右边距：5px；
宽度：20px；
高度：20px；
}
/*------------------
!幻灯片放映
------------------*/
.幻灯片放映{
背景：var（--深蓝色）；
位置：相对位置；
}
.ss项目{
宽度：100%；
高度：80vh；
右边距：0；
背景：var（--绿色）；
字号：1.25em；
}
.ss项目：第n个孩子（1）{
背景：url（../img/ss1.jpg）不重复；
背景尺寸：封面；
背景位置：中心；
}
.ss项目：第n个孩子（2）{
背景：url（../img/ss2.jpg）无重复；
背景尺寸：封面；
背景位置：中心；
}
.ss项目：第n个孩子（3）{
背景：url（../img/ss3.jpg）不重复；
背景尺寸：封面；
背景位置：中心；
}
.ss项目：第n个孩子（4）{
背景：url（../img/ss4.jpg）不重复；
背景尺寸：封面；
背景位置：中心；
}
.ss项目：第n个孩子（5）{
背景：url（../img/ss5.jpg）不重复；
背景尺寸：封面；
背景位置：中心；
}
.ss-item\uuu文本{
位置：绝对位置；
左：50px；
底部：50px；
宽度：90%；
}
.ss-第1项{
保证金：0；
填充：10px；
浮动：左；
显示：内联块；
颜色：白色/*var（--绿色）*/；
/*背景：var（--深蓝色）*/
}
.ss-项目{
保证金：0；
填充：10px；
宽度：80%；
浮动：左；
清除：左；
显示：内联块；
颜色：白色/*var（--绿色）*/；
文本对齐：左对齐；
/*背景：var（--深蓝色）*/
}
.slideshow.flickity页面点{
底部：0.5em；
不透明度：1；
}
.slideshow.flickity页面点.点{
宽度：10px；
高度：10px；
背景：#ccc；
边框：2倍实心透明；
}
.slideshow.flickity页面dots.dot.is-selected{
背景：