Я пытаюсь создать контейнер настроек (filter-container), который открывается нажатием кнопки. Я хочу, чтобы он открылся, и страница должна разрешать взаимодействие только с этим filter-container. Таким образом, main-container не должен быть прокручиваемым, а видимое button его не должно быть доступно до щелчка, пока filter-container не будет закрыто. Эту аналогичную систему можно найти в Instagram на десктоп-версии при открытии поста, а внешняя страница за постом не взаимодействует. Я не могу придумать, как создать эту систему, поэтому мне нужна помощь. Кроме того, я был бы очень признателен, если бы смог получить решение без взаимодействия CSS.
let e = document.querySelector("filter-container"),
b1 = document.querySelector("main-container button"),
b2 = e.querySelector("button");
b1.onclick = function() {
console.log("CLICK-ABLE");
e.style.display = "block";
};
b2.onclick = function() {
console.clear();
e.style.display = "none";
};
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
background-color: rgb(35, 35, 35);
} main-container {
display: block;
height: 2000px;
width: 95%;
background-color: rgb(110, 170, 250);
text-align: center;
position: absolute;
margin-left: 2.5%;
z-index: 0;
} filter-container {
display: none;
height: 75%;
width: 85%;
background-color: rgb(175, 175, 175);
text-align: center;
position: absolute;
margin-top: 12.5%;
margin-left: 7.5%;
overflow-x: hidden;
overflow-y: auto;
z-index: 1;
} filter-container button {
margin-bottom: 2500px;
} button {
font-size: 20px;
padding: 15px;
margin-top: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<main-container>
<button>OPEN-FILTER</button>
</main-container>
<filter-container>
<button>CLOSE-FILTER</button>
<p></p>
</filter-container>
</body>
</html>