Не пойму почему один background проявляется
До -
https://skr.sh/sOpcOcuJITn
После -
https://skr.sh/sOpaSdVX8sH
<div class="popup__button circle-5">
<a href="#" id="popup">
<button class="home-btn circle-6">
Записаться на ознакомительный вебинар
</button>
</a>
</div>
</div>
<div class="popup" id="popup">
<div class="popup__body">
<div class="popup__content">
<h3 class="popup__title"><span>Записаться</span> на ознакомительный вебинар</h3>
<div class="popup__subtitle">К сожалению мы не проводим обучение</div>
</div>
</div>
</div>
.popup {
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
z-index: 3000;
overflow: auto;
visibility: hidden;
opacity: 0;
}
.popup.open {
opacity: 1;
visibility: visible;
}
.popup__body {
align-items: center;
display: flex;
justify-content: center;
min-height: 100%;
align-items: center;
}
.popup__content {
background: linear-gradient(286.41deg, #033958 3.63%, #0F6B78 90.98%);
box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.53);
border-radius: 20px;
max-width: 590px;
padding: 65px 85px;
position: relative;
}
.popup__title {
span {
color: #00E0FF;
}
width: 428px;
font-size: 33px;
line-height: 40px;
color: #fff;
text-transform: uppercase;
margin-bottom: 23px;
}
.popup__subtitle {
color: #fff;
font-weight: 450;
font-size: 18px;
}
const popup = document.querySelector('.popup')
const openPopup = document.querySelector('.popup__button')
const popupOpen = () => {
popup.classList.add('open')
}
openPopup.addEventListener('click', popupOpen)