0

введите сюда описание изображения

JS - >>>>>>

const modalTrigger = document.querySelectorAll("[data-modal]"),
    modal = document.querySelector(".modal");

  function closeModal() {
    modal.classList.remove("show");
    modal.classList.add("hide");
    document.body.style.overflow = "";
  }

  function openModal() {
    modal.classList.remove("hide");
    modal.classList.add("show");
    document.body.style.overflow = "hidden";
    clearInterval(modalTimerId);
  }

  modalTrigger.forEach(function (btn) {
    btn.addEventListener("click", function () {
      openModal();
    });
  });

HTML ->>>>>>>>>

<div class="modal">
  <div class="modal__dialog">
    <div class="modal__content">
      <form action="#">
        <div data-close class="modal__close">&times;</div>
        <div class="modal__title">
          Мы свяжемся с вами как можно быстрее!
        </div>
        <input
          required
          placeholder="Ваше имя"
          name="name"
          type="text"
          class="modal__input"
        />
        <input
          required
          placeholder="Ваш номер телефона"
          name="phone"
          type="phone"
          class="modal__input"
        />
        <button class="btn btn_dark btn_min">Перезвонить мне</button>
      </form>
    </div>
  </div>
</div>

У меня просто исчезает боковой скролл, так как оверфлоу применился при клике на кнопку, но сама панель не появляется. Я был вынуженден применить до этого просто style.display="block", но теперь это вылезло боком в коде

3
  • 1
    В вопросе по CSS нет собственно CSS-кода. Надо добавить
    – Alexey Ten
    5 авг 2020 в 7:35
  • 1
    Судя по вашим скригшотам, у класса modal задан display:none и он «побеждает» класс show (возможно просто потому что идёт в коде ниже) css-live.ru/css/nikto-ne-znaet-css-specifichnost-ne-kaskad.html
    – Alexey Ten
    5 авг 2020 в 7:36
  • @AlexeyTen Вы были правы, покапавший в элементах, ответ был перед моим носом. В диспетчере на странице четко указанны стили и номера строк, каскад работает все таки безжалостно)
    – RTN JO
    5 авг 2020 в 9:06

1 ответ 1

0

Для того что бы сделать none элемент снова блоком ( display: block ), надо обращаться через родителя (классом выше).

Например:

   <div class="modal">
        <div class="modal__dialog show">
        </div>
    </div>

то надо обращаться не .show, a .modal.show

2
  • Ответ был в стилях, код css с моими show и hide стоит выше чем modal. Что странно немного, потому что классы добавляются после нажатия на кнопку, а странница же загрузилась, надо бы еще раз css глянуть получше
    – RTN JO
    5 авг 2020 в 9:08
  • об этом я знаю, но если вы будете использовать обращение через родителя в стилях, оно всегда должно работать (пока не мере у меня работало)
    – umid
    5 авг 2020 в 18:36

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.