Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Не появляется popup (https://javascript.ru/forum/misc/85798-ne-poyavlyaetsya-popup.html)

deniscikasov@gmail.com 19.03.2024 13:35

Не появляется popup
 
Не пойму почему один 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)


Часовой пояс GMT +3, время: 13:57.