如何实现点击按钮打开侧边菜单时其余页面变暗且不可访问？

核心实现逻辑是在页面中新增遮罩层元素，配合侧边栏的展开/收起状态同步控制遮罩的显隐，既实现页面其余区域变暗的视觉效果，也能直接拦截非菜单区域的所有用户交互。

具体修改步骤 #

• 新增遮罩层DOM节点：将<div class="menu-backdrop"></div>放在侧边菜单.linkList的同级位置，作为菜单容器的直接子元素即可
• 补充样式规则：给遮罩层加全屏固定定位、半透明黑色背景，设置合适的层级保证它在普通页面内容之上、侧边菜单之下；同时给侧边菜单提高层级，保证菜单内的链接可正常点击
• 调整交互逻辑：点击菜单按钮展开侧边栏时同步显示遮罩，点击按钮收起、点击遮罩、按下ESC键时同步隐藏遮罩、收回菜单
• 修复原有代码的语法问题：删除重复的<body>标签，把lang属性统一放到正确的body标签上

关键代码参考 #

核心CSS样式 #

/* 遮罩层样式 */
.menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;
    display: none;
}
/* 给侧边栏提层级，保证在遮罩上方可交互 */
.linkList {
    z-index: 100;
    /* 保留你原有的position、width、transition等其他样式即可 */
}

交互JS逻辑 #

const menuBtn = document.querySelector('.menuButton');
const sideMenu = document.querySelector('.linkList');
const menuBackdrop = document.querySelector('.menu-backdrop');

// 菜单状态切换方法
const switchMenu = (isOpen) => {
    if (isOpen) {
        sideMenu.style.right = '0px';
        menuBackdrop.style.display = 'block';
        // 可选：菜单展开时禁止页面滚动
        document.body.style.overflow = 'hidden';
    } else {
        sideMenu.style.right = '-150px';
        menuBackdrop.style.display = 'none';
        document.body.style.overflow = 'auto';
    }
}

// 菜单按钮点击事件
menuBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    const currentState = sideMenu.style.right !== '0px';
    switchMenu(currentState);
});

// 点击遮罩关闭菜单
menuBackdrop.addEventListener('click', () => {
    switchMenu(false);
});

// 按下ESC键关闭菜单（可选优化，符合通用交互习惯）
document.addEventListener('keydown', (e) => {
    if (e.key === 'Escape' && sideMenu.style.right === '0px') {
        switchMenu(false);
    }
});

效果说明 #

• 菜单展开时，遮罩层会覆盖除侧边栏外的所有页面区域，半透明黑色实现压暗效果
• 遮罩层会拦截所有鼠标点击、hover、键盘焦点事件，下方的链接、按钮完全无法被用户操作，直到菜单收回
• 额外加的禁止页面滚动、ESC关闭菜单逻辑和YouTube原生交互完全一致，使用体验更流畅

内容的提问来源于stack exchange，提问作者V4N464NDR