Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.03.2024, 13:35
Аватар для deniscikasov@gmail.com
Аспирант
Отправить личное сообщение для deniscikasov@gmail.com Посмотреть профиль Найти все сообщения от deniscikasov@gmail.com
 
Регистрация: 14.03.2023
Сообщений: 82

Не появляется 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)

Последний раз редактировалось deniscikasov@gmail.com, 19.03.2024 в 13:52.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не выводить popup при скроле Jerardx Events/DOM/Window 0 03.08.2015 10:25
Помогите пожалуйста с Popup Chigr jQuery 3 25.02.2014 16:35
Popup форма не появляется Zorend Общие вопросы Javascript 1 31.10.2013 19:25
popup окно в PHP цикле ryobi522 Общие вопросы Javascript 5 10.02.2012 02:18
как сделать popup с прокруткой? shaltay jQuery 0 14.10.2011 21:11