"открытие" и "закрытие" pop-up окна JS
Начал учиться освоению JS и не могу понять некоторые базовые вещи: Сначала мы создаем оболочку Pop-Up в CSS/HTML Примерно в таком виде. Но когда дошёл до части "Чтобы при нажатии кнопки в документе pop-up открывался и при нажатии на крестик закрывался" я потерялся. Я правильно понимаю, что мне для реализации этих действий нужно две функции в JS - popUpOpen и popUpClosed? JS начал осваивать буквально пару дней назад, поэтому после обычной верстки я испытываю культурный шок. Буду очень благодарен, если подскажите, куда мне двигаться.
.popup__container{
position: fixed;
left: 0;
top: 0;
width: 430px;
background-color: white;
color: black;
display: flex;
flex-direction: column;
box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.15);
border-radius: 10px;
}
.popup__edit{
margin: 34px 64px 54px 36px;
}
.popup__name{
margin: 0 36px 30px 36px;
}
.popup__info{
margin: 0 36px 48px 36px;
}
.popup__save{
margin: 0 36px 36px 36px;
width: 358px;
height: 50px;
background-color: black;
color: white;
}
.popup__close{
position: fixed;
right: -25px;
top: -50px;
}
.popup__container_popup_opened{
display: block;
}<section class="popup">
<div class="popup__container popup__container_popup_opened">
<img src="./images/close__icon.svg" class="popup__close">
<h2 class="popup__edit">Редактировать профиль</h2>
<input class="popup__name" placeholder="Жак-Ив Кусто">
<input class="popup__info" placeholder="Исследователь океана">
<button class="popup__save">Сохранить</button>
</div>
</section>