Как сделать модальное окно после отправки формы?

Для создания модального окна после отправки формы в JavaScript можно использовать различные подходы. Один из самых простых способов - использовать событие submit на форме и предотвратить ее стандартное поведение, а затем создать и отобразить модальное окно.

Вот краткое объяснение шагов, которые нужно предпринять:

1. Найти форму, к которой вы хотите добавить функциональность модального окна. Можно сделать это с помощью метода querySelector, передавая ему селектор формы, или методом getElementById, если у формы есть уникальный идентификатор.

2. Назначить обработчик события submit форме, используя свойство onsubmit или метод addEventListener. Обработчик будет вызван, когда форма будет отправлена.

3. Внутри обработчика события submit создайте элемент для модального окна с помощью метода createElement. Например, вы можете создать элемент div с классом modal.

4. Добавьте содержимое к модальному окну, например, текст об успешной отправке формы или любую другую информацию, которую вы хотите показать пользователю.

5. Добавьте стили для модального окна, чтобы оно выглядело как модальное окно. Можно использовать CSS или назначить значения стилей через JavaScript, используя свойство style.

6. Вставьте модальное окно в DOM, добавив его внутрь элемента body с помощью метода appendChild.

7. Чтобы модальное окно отображалось, добавьте класс или установите свойство display со значением block модальному окну.

Конечный код может выглядеть примерно так:

// Шаг 1: найти форму
const form = document.querySelector('form');

// Шаг 2: назначить обработчик события submit
form.addEventListener('submit', function(event) {
  // Шаг 3: создать элемент для модального окна
  const modal = document.createElement('div');
  modal.classList.add('modal');

  // Шаг 4: добавить содержимое к модальному окну
  modal.textContent = 'Форма успешно отправлена!';

  // Шаг 5: добавить стили для модального окна
  modal.style.display = 'block';
  modal.style.position = 'absolute';
  modal.style.top = '50%';
  modal.style.left = '50%';
  modal.style.transform = 'translate(-50%, -50%)';
  modal.style.width = '200px';
  modal.style.height = '100px';
  modal.style.backgroundColor = 'white';
  modal.style.border = '1px solid black';
  modal.style.padding = '10px';

  // Шаг 6: добавить модальное окно в DOM
  document.body.appendChild(modal);

  // Шаг 7: предотвращение стандартного поведения формы
  event.preventDefault();
});

Вы можете дополнить этот код в соответствии с вашими потребностями, добавив дополнительные стили или функциональность к модальному окну.