我使用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>
<p id="sign_up_here" onclick="myfunc1()">SIGN UP HERE</p>
<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而不是选择器，但我已经搜索了互联网，找不到。如果有人能帮我，我将不胜感激
将body内容放入div中，例如(div id="body2")，div id="mad"这个.
<body
<div id="body2"
your page
</div>
<div id="mad" . . . .
<script>
function myfunc1(){
var mad = document.getElementById("mad")
var body = document.querySelector('body2')
var nav = document.querySelector('nav')
mad.style.display = "block"
body.style.filter = "brightness(20%)"
}
</script>