我使用Javascript来变暗屏幕每当我点击一个按钮，我的表单显示出来，但我的表单变暗与屏幕.我知道如果我使用CSS，我应该使用：not选择器，但我需要知道如何在JS上做到这一点.请任何人都可以帮助.
这是我的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>

这是我的JS

<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>

我相信如果有一种方法可以在JS中使用CSS而不是选择器，但我在互联网上搜索过，找不到。如果有人能帮助我，我将不胜感激