Всем привет, подскажите, пожалуйста, как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук? У меня есть кнопка и несколько ее копий на странице, и я хочу, чтобы если пользователь захотел нажать на кнопку, только на другом месте страницы, открывалась та же самая форма. Но, к сожалению, ее открывает, только самая первая кнопка, подскажите, пожалуйста, решение! Спасибо!
<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>
#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;
}
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);
Простой
