如何在JS中实现类似CSS :not选择器效果，避免表单随页面变暗？

我用JavaScript实现了点击按钮显示表单并让页面变暗的功能，但表单也跟着变暗了。我知道CSS里能用:not选择器排除元素，但不知道怎么在JavaScript里实现类似效果，附上相关代码求帮助：

HTML代码 #

<div id="mad" style="display: none; position: fixed; z-index: 100; left: 550px;">
  <div style="color: black; position: absolute; top: 10px; background-color: red; width: 40px; height: 30px; position: absolute; right: -530px; top: -6px; border-radius: 2px; display: flex; justify-content: center; align-items: center;">X</div>
  <form action="" style="display: flex; justify-content: center; align-items: center; flex-direction: column;  background: #F8573B; height: 750px; width: 500px; z-index: 100; border-radius: 30px;">
    <div class="img" style="height: 250px; width: 250px; border-radius: 50%; background:url(./giit-site_files/nobody2.gif); position: absolute; top: 23px;"></div>
    <div style="position: absolute; top: 300px; display: flex; justify-content: center; align-items: center; flex-direction: column;">
      <input type="text" name="firstname" id="firstname" placeholder="Please input your firstname" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
      <input type="text" name="lastname" id="lastname" placeholder="Please input your lastname" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
      <input type="text" name="email" id="email" placeholder="Please input your email" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
      <input type="text" name="course" id="course" placeholder="Please input your course" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
      <input type="text" name="program" id="program" placeholder="Please input your program" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
      <p style="margin: 10px;">Can't decide your program, hit the program decider button <button>HERE</button></p>
      <input type="number" name="duration" id="duration" placeholder="Please input your program duration" style="margin: 10px; width: 380px; height: 25px; border-radius: 10px; border: solid black;">
      <button style="width: 130px; height: 40px; border-radius: 10px; margin-top: 15px; background-color: red; border: hidden; font-size: larger; color: white;" type="submit">SUBMIT</button>
    </div>
  </form>
</div>

按钮HTML代码 #

<p id="sign_up_here" onclick="myfunc1()">SIGN UP HERE</p>

JavaScript代码 #

<script>
   function myfunc1(){
    var mad = document.getElementById("mad")
    var body = document.querySelector('body')
    var nav = document.querySelector('nav')
    mad.style.display = "block"
    body.style.filter = "brightness(20%)"
   }
</script>

方法1：使用独立遮罩层（推荐） #

这是弹窗暗背景的标准实现方式，完全不会影响弹窗本身：

1. 在HTML里添加一个全屏遮罩层：

<div id="overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); z-index: 99;"></div>

2. 修改JavaScript代码，显示遮罩层而非给body加滤镜：

function myfunc1(){
  const mad = document.getElementById("mad");
  const overlay = document.getElementById("overlay");
  mad.style.display = "block";
  overlay.style.display = "block";
}

3. 确保弹窗容器#mad的z-index（你的代码里是100）比遮罩层（99）高，这样弹窗会显示在遮罩层上方。

方法2：给表单添加反向滤镜抵消效果 #

如果不想改动DOM结构，可以给弹窗容器添加反向滤镜，抵消body的变暗效果：

function myfunc1(){
  const mad = document.getElementById("mad");
  const body = document.querySelector('body');
  mad.style.display = "block";
  body.style.filter = "brightness(20%)";
  // 20%亮度的反向是1/0.2=5，用brightness(5)抵消
  mad.style.filter = "brightness(5)";
}

注意：这种方法可能会让表单内的颜色、图片显示略有偏差，不如遮罩层方法稳定。

方法3：调整DOM结构，只给页面内容加滤镜 #

把页面除弹窗外的所有内容放进一个容器，比如<div id="page-content">，然后只给这个容器加滤镜，弹窗放在容器外面：

<!-- 页面所有内容都放在这里 -->
<div id="page-content">
  <!-- 原有的nav、其他内容等 -->
  <p id="sign_up_here" onclick="myfunc1()">SIGN UP HERE</p>
</div>
<!-- 弹窗放在容器外 -->
<div id="mad" style="display: none; position: fixed; z-index: 100; left: 550px;">
  <!-- 表单内容 -->
</div>

修改JavaScript代码：

function myfunc1(){
  const mad = document.getElementById("mad");
  const pageContent = document.getElementById("page-content");
  mad.style.display = "block";
  pageContent.style.filter = "brightness(20%)";
}

内容的提问来源于stack exchange，提问作者Philip Joe Yakubu