Как сделать модальное окно с формой?

Question

[newsworker90]

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

Comments

[ThunderCat]

ок, что сделали, что не получилось?

[newsworker90]

ThunderCat,

<button id="button">click</button>

<div id="modal">
  <form id="form" method="post">
    <p>Остались вопросы?<br>Оставьте Ваши данные и мы перезвоним!</p>
    <input type="text" name="name" placeholder="Ваше имя*" required="required" pattern="[a-zA-Zа-яА-Я]+">
    <input type="tel" name="phone" placeholder="Ваш телефон*" required="required" minlength="10" maxlength="15">
    <button type="submit" class="button arrow close_modal">ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ</button>
    <span class="info">Информация не подлежит разглашению третьим лицам.</span>
  </form>
</div>

var button = document.getElementById('button');
var modal = document.getElementById('modal');
var close = document.getElementsByClassName("close_modal")[0];

button.onclick = function () {
	modal.style.display = 'block';
}

wrapper.onclick = function () {
	modal.style.display = 'none';
}

close.onclick = function () {
	modal.style.display = 'none';
}

#modal {
  display: none;
  position: fixed;
  left: 50%;
  transform: translate(-50%);
  z-index: 99;
  padding: 15px;
  background: #00000091;
}

[newsworker90]

ThunderCat, Вот пытаюсь сделать форму обратной связи в модалке, что бы по нажатию на ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ модалка закрывалась и отправляло на почту письмо с заполнеными данными

[ThunderCat]

newsworker90, вешать событие на субмит формы, сделать превентДефаулт(), аяксом отправить форму на сервер, на сервере все поля проверить и в случае если все ок отправить письмо, с сервера получить подтверждение что все с данными ок и спрятать модалку, а если на сервере произошла лажа - вернуть с сервера ошибку, которую вывести в какой-то блок модалки.

[newsworker90]

ThunderCat, Все работает, спасибо

Answer 1

[Дима Паутов]

создать модальное окно и сделать клик по кнопке, который его откроет
Или взять готовые реализации для модальных окон и просто следовать инструкции