侧边菜单打开时如何让背景变暗禁止外部点击，且仅菜单打开时触发外部关闭逻辑

核心修改点 #

• 新增遮罩层实现页面变暗+拦截外部点击：新增全屏固定定位的遮罩元素，z-index介于页面内容和侧边菜单之间，菜单打开时显示半透明黑色背景，自然拦截下层内容的点击操作。
• 优化点击外部关闭逻辑：在原有全局mouseup事件中增加menuOpen状态判断，仅当菜单处于打开状态时才执行关闭校验，同时修正原代码中jQuery选择器的错误（菜单ID为myMenu，原代码漏写ID选择符#且ID值错误）。

修改后完整代码 #

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- 新增遮罩层 -->
<div id="overlay"></div>
<p>This is just random information to make my point clear, don't take too much attention to it.</p>
<a href="javascript:void(0)" class="closebtn" onclick="openNav()">Open Menu</a>
<p>Extra random Stuff</p>
<p>You can close the menu clicking elsewhere the page.</p>
<div id="myMenu">
  <ul>
    <li>This is menu stuff</li>
    <li>Menu Stuff 2</li>
    <li>Menu Stuff 3</li>
  </ul>
</div>

CSS代码 #

#myMenu {
  height      : 100%;
  width       : 0;
  position    : fixed;
  /* 菜单层级高于遮罩 */
  z-index     : 10;
  top         : 0;
  right       : 0;
  background  : blue;
  overflow-x  : hidden;
  transition  : 0.5s;
  padding-top : 60px;
  display     : flex;
  align-items : center;
  opacity     : 0.98;
  color       : #fff;
}
/* 新增遮罩层样式 */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9;
  transition: 0.5s;
}

JS代码 #

var menuOpen = false;

function openNav() {
  document.getElementById("myMenu").style.width = "50%";
  // 打开遮罩
  document.getElementById("overlay").style.width = "100%";
  menuOpen = true;
}

function closeNav() {
  document.getElementById("myMenu").style.width = "0%";
  // 关闭遮罩
  document.getElementById("overlay").style.width = "0%";
  menuOpen = false;
}

$(document).mouseup(function(e) {
  // 仅菜单打开时触发外部关闭逻辑
  if(menuOpen) {
    var container = $("#myMenu");
    if (!container.is(e.target) && container.has(e.target).length === 0) {
      closeNav();
    }
  }
});

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