Javascript 如何使模式框在弹出框后面褪色？

我的任务是创建一个模态框并将其实现到一些现有代码中

我的模式框被称为扇区，由于某种原因，当它被点击并显示弹出框时，它会粘在屏幕上；而不是在黑色褪色的背景后面

我想知道为什么会发生这种情况，以及我如何才能做到这一点，使它不会像它那样引人注目

提供的代码片段就是我将模态框代码集成到其中的代码片段

var content=”“；
$（'a[href=“#ex5”]”）。单击（函数（事件）{
event.preventDefault（）；
$（本文件）({
escapeClose:错误，
单击关闭：false，
showClose:false，
});
$（'input[type=checkbox]'）。prop（'checked'，false）；
});

。仅限这些{
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
输入[type=“checkbox”]+标签{颜色：白色}
输入[type=“checkbox”]{显示：无}
输入[type=“checkbox”]：选中+标签{颜色：红色}
输入：焦点{
大纲：无；
}
/*保持过滤器在右下角*/
.你的部门{
浮动：对；
底部：0；
右：0；
位置：绝对位置；
右侧填充：30px；
垫底：15px；
字号：16px
}
.黑盒子{
边框样式：实心；
边框颜色：黑色；
背景色：黑色；
利润底部：3倍；
填充顶部：12px；
垫底：12px；
左侧填充：7px；
字体系列：nunito；
字体大小：14px；
}
a{
颜色：白色；
文字装饰：无；
字体系列：nunito
}
.content.media-planning-page.bottom section.sidebar.single filter.sub-filters.show{
显示：块；
}
.content.media-planning-page.底部部分.广告部分.扇区{
边缘底部：20px；
位置：绝对位置；
顶部：0px；
右：0px；
宽度：150px；
z指数：9；
}
.content.media-planning-page.底部部分.广告部分.扇区.标题{
字号：18px；
字体大小：粗体；
左边距：10px；
右侧填充：5px；
光标：指针；
填充：10px；
}
.content.media-planning-page.底部部分.广告部分.扇区.标题.向下箭头{
浮动：对；
}
/*.content.media-planning-page.底部部分.广告部分.扇区.标题，
.content.media-planning-page.底部部分.广告部分.扇区.选项，
.content.media-planning-page.底部部分.广告部分.扇区.选项.单个选项*/
.content.media-planning-page.底部部分.广告部分.扇区.选项.单个选项.字段，
.content.media-planning-page.底部部分.广告部分.扇区.选项.单个选项.标签{
显示：内联块；
}
.content.media-planning-page.底部部分.广告部分.扇区.选项{
盒影：0.4px10px-2px灰色；
边缘顶部：5px；
显示：无；
}
.content.media-planning-page.bottom section.ads section.sections.options.show{
显示：块；
}
.content.media-planning-page.底部部分.广告部分.扇区.选项.单个选项{
填充：8px；
边框底部：1px实心#F7F7；
背景：白色；

滤器
出版

电视

无线电

哦

将以下样式添加到弹出窗口的css文件中

z-index: 2; 

---

由于z指数问题，叠加的z指数应大于扇区

因此，z指数超过了.blocker 10，而不是1。因为行业的z指数为9

.blocker{z-index:10！重要；}需要标记为重要，因为它来自第三方

var content=”“；
$（'a[href=“#ex5”]”）。单击（函数（事件）{
event.preventDefault（）；
$（本文件）({
escapeClose:错误，
单击关闭：false，
showClose:false，
});
$（'input[type=checkbox]'）。prop（'checked'，false）；
});

.blocker{z-index:10！重要；}
.只有这些{
光标：指针；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
输入[type=“checkbox”]+标签{颜色：白色}
输入[type=“checkbox”]{显示：无}
输入[type=“checkbox”]：选中+标签{颜色：红色}
输入：焦点{
大纲：无；
}
/*保持过滤器在右下角*/
.你的部门{
浮动：对；
底部：0；
右：0；
位置：绝对位置；
右侧填充：30px；
垫底：15px；
字号：16px
}
.黑盒子{
边框样式：实心；
边框颜色：黑色；
背景色：黑色；
利润底部：3倍；
填充顶部：12px；
垫底：12px；
左侧填充：7px；
字体系列：nunito；
字体大小：14px；
}
a{
颜色：白色；
文字装饰：无；
字体系列：nunito
}
.content.media-planning-page.bottom section.sidebar.single filter.sub-filters.show{
显示：块；
}
.content.media-planning-page.底部部分.广告部分.扇区{
边缘底部：20px；
位置：绝对位置；
顶部：0px；
右：0px；
宽度：150px；
z指数：9；
}
.content.media-planning-page.底部部分.广告部分.扇区.标题{
字号：18px；
字体大小：粗体；
左边距：10px；
右侧填充：5px；
光标：指针；
填充：10px；
}
.content.media-planning-page.底部部分.广告部分.扇区.标题.向下箭头{
浮动：对；
}
/*.content.media-planning-page.底部部分.广告部分.扇区.标题，
.content.media-planning-page.底部部分.广告部分.扇区.选项，
.content.media-planning-page.底部部分.广告部分.扇区.选项.单个选项*/
.content.media-planning-page.底部部分.广告部分.扇区.选项.单个选项.字段，
.content.media-planning-page.底部部分.广告部分.扇区.选项.单个选项.标签{
显示：内联块；
}
.content.media-planning-page.底部部分.广告部分.扇区.选项{
盒影：0.4px10px-2px灰色；
边缘顶部：5px；
显示：无；
}
.content.media-planning-page.底部部分.广告部分.扇区.选项