БЛОГ НА HUSL


Как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук?

Автор вопроса: IsayR

Всем привет, подскажите, пожалуйста, как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук? У меня есть кнопка и несколько ее копий на странице, и я хочу, чтобы если пользователь захотел нажать на кнопку, только на другом месте страницы, открывалась та же самая форма. Но, к сожалению, ее открывает, только самая первая кнопка, подскажите, пожалуйста, решение! Спасибо!

const btnForm = document.getElementById('open');
const modal = document.getElementById('wrapperModal');
const overlay = document.getElementById('overlayModal');
const close = document.getElementById('close');


btnForm.addEventListener('click', (e) => {
    e.preventDefault()
    modal.classList.add('active');
});

const closeModal = () => {
    modal.classList.remove('active');
}

overlay.addEventListener('click',closeModal);
close.addEventListener('click',closeModal);
#wrapperModal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 3;
  top: 8%;
  left: 20%;
}

#wrapperModal.active {
  display: block;
} 

#overlayModal {
  position: absolute;
    top: -8%;
    left: -20%;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: grey;
    opacity: 0.5;
}

.form-modal__body {
  width: 270px;
  min-height: 200px;
  background: #363A4D;
  border-radius: 20px;
  padding: 48px 51px 41px 50px; 
  position: relative;
}

.form-modal__title {
  font-size: 24px;
  margin-bottom: 23px;
}

.close:before, .close:after {
  position: absolute;
  content: ' ';
  right: 28px;
  top: 16px;
  height: 18px;
  width: 2px;
  background-color: #7E839A;
  cursor: pointer;
  border-radius: 5px;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}
.form-modal__label {
  margin-bottom: 6px;
}
<body>
  <button class="btn-modal" id="open">Отправить заявку</button>
  <button class="btn-modal" id="open">Отправить заявку</button>
  <button class="btn-modal" id="open">Отправить заявку</button>
  <div class="wrapper-modal" id="wrapperModal">
            <div class="overlay-modal" id="overlayModal"></div>
              <div class="form-modal__item" id="formModal">
                <form action="#" id="formModalBody" class="form-modal__body">
                  <h4 class="form-modal__title">
                    Оставьте заявку
                  </h4>
                  <span class="close" id="close">
                   <div class="form-modal__item">
                      <label for="formName" class="form-modal__label">
                        Имя:
                      </label>  
                      <input id="formName" type="text" name="name" class="form-modal__input" placeholder="Ваше имя *">
                    </div>
                      <div class="form-modal__item">
                        <label for="formTel" class="form-modal__label">
                          Номер телефона:
                        </label>
                        <input id="formTel" type="tel" name="length" class="form-modal__input" placeholder="+7 (___) ___ - __ - __ *">
                      </div>
                      <div class="form-modal__item">
                        <label for="formEmail" class="form-modal__label">
                          Email:
                        </label>
                        <input id="formEmail" type="text" name="width" class="form-modal__input" placeholder="Введите e-mail *">
                      </div>
                  <button class="form-modal__button" id="open">Отправить</button>
              </form>
            </div>
          </div>
</body>


Источник

Ответы (1 шт):

Автор решения: EzioMercer

Предложу использовать querySelectorAll():

const btnsForm = document.querySelectorAll('.btn-modal');
const modal = document.getElementById('wrapperModal');
const overlay = document.getElementById('overlayModal');
const close = document.getElementById('close');


btnsForm.forEach(btnForm => btnForm.addEventListener('click', (e) => {
    e.preventDefault()
    modal.classList.add('active');
}));

const closeModal = () => {
    modal.classList.remove('active');
}

overlay.addEventListener('click',closeModal);
close.addEventListener('click',closeModal);
#wrapperModal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 3;
  top: 8%;
  left: 20%;
}

#wrapperModal.active {
  display: block;
} 

#overlayModal {
  position: absolute;
    top: -8%;
    left: -20%;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: grey;
    opacity: 0.5;
}

.form-modal__body {
  width: 270px;
  min-height: 200px;
  background: #363A4D;
  border-radius: 20px;
  padding: 48px 51px 41px 50px; 
  position: relative;
}

.form-modal__title {
  font-size: 24px;
  margin-bottom: 23px;
}

.close:before, .close:after {
  position: absolute;
  content: ' ';
  right: 28px;
  top: 16px;
  height: 18px;
  width: 2px;
  background-color: #7E839A;
  cursor: pointer;
  border-radius: 5px;
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}
.form-modal__label {
  margin-bottom: 6px;
}
<body>
  <button class="btn-modal" id="open1">Отправить заявку</button>
  <button class="btn-modal" id="open2">Отправить заявку</button>
  <button class="btn-modal" id="open3">Отправить заявку</button>
  <div class="wrapper-modal" id="wrapperModal">
            <div class="overlay-modal" id="overlayModal"></div>
              <div class="form-modal__item" id="formModal">
                <form action="#" id="formModalBody" class="form-modal__body">
                  <h4 class="form-modal__title">
                    Оставьте заявку
                  </h4>
                  <span class="close" id="close">
                   <div class="form-modal__item">
                      <label for="formName" class="form-modal__label">
                        Имя:
                      </label>  
                      <input id="formName" type="text" name="name" class="form-modal__input" placeholder="Ваше имя *">
                    </div>
                      <div class="form-modal__item">
                        <label for="formTel" class="form-modal__label">
                          Номер телефона:
                        </label>
                        <input id="formTel" type="tel" name="length" class="form-modal__input" placeholder="+7 (___) ___ - __ - __ *">
                      </div>
                      <div class="form-modal__item">
                        <label for="formEmail" class="form-modal__label">
                          Email:
                        </label>
                        <input id="formEmail" type="text" name="width" class="form-modal__input" placeholder="Введите e-mail *">
                      </div>
                  <button class="form-modal__button" id="open">Отправить</button>
              </form>
            </div>
          </div>
</body>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.