Javascript 移动菜单-CSS/DIV-菜单周围可见背景变暗？

当我的移动菜单打开时，我希望剩下的可见背景（菜单本身除外）变暗。（我的页面和菜单背景通常都是白色的）

有一个插件提供了这一功能，但在试图保持网站轻，我试图看看这是否是可能的，只是一些代码行

谷歌搜索了很长一段时间后，除了这个应用程序之外，什么都没想到，这真是一个惊喜。。。也许我搜索错关键词了

有什么想法吗

这是我的完整代码（不是我的原始代码，可以将各个部分链接到各自的作者）

---

如果你能提供一些HTML，那会更好。我不知道从哪里开始。。。。我可以把主页切换到手机上，如果有帮助的话，还可以通过Chrome浏览器下载一些代码？这就是你的意思吗？你能做的就是做一个div，并用黑色背景和较少的不透明来设计它。当用户处于移动响应模式时，在整个页面上显示黑色背景，并使菜单索引大于div。您可能需要添加javascript

/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
  color:#D7AF39;
}

/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
    background-color:#FFFFFF;
}

/** Divi Space slide in mobile edits**/

#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }

.mobile_nav.closed #mobile_menu {
 transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #fff; transition: .8s ease-in-out !important; }

.mobile_nav.opened #mobile_menu {
 transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
 transform-origin: right; -webkit-transform-origin: right;
 background: #fff; transition: .8s ease-in-out; }

.mobile_nav.opened .mobile_menu_bar:before {
 content: "\4d"; color: #D7AF39; }

.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
    font-weight: 600;
        font-family: open sans;
        font-size: large;
}

@media(max-width: 980px) {

.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }

#main-header .container.clearfix.et_menu_container { width: 100%; }

.logo_container { padding-left: 30px; }

#et-top-navigation { padding-right: 30px; }

}

@media(min-width: 341px) {

#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}