Vefolio

Для создания всплывающего окна с яндекс-формой можно использовать следующий подход:

Создайте кнопку или ссылку, по клику на которую будет открываться всплывающее окно.

<button id="open-form-btn">Открыть форму</button>

Добавьте JavaScript-обработчик на кнопку, который будет открывать всплывающее окно.

const openFormBtn = document.querySelector('#open-form-btn');
const formPopup = document.querySelector('#form-popup');

openFormBtn.addEventListener('click', function() {
  formPopup.classList.add('show');
});

Здесь мы добавляем обработчик события click на кнопку с id "open-form-btn" и добавляем класс "show" к элементу с id "form-popup", который будет содержать всплывающее окно.

Создайте всплывающее окно и добавьте в него яндекс-форму.

<div id="form-popup" class="form-popup">
  <div class="form-content">
    <!-- Ваша яндекс-форма здесь -->
  </div>
</div>

Здесь мы создаем элемент с id "form-popup" и классом "form-popup", который будет содержать всплывающее окно. Внутри него создаем элемент с классом "form-content", в котором будет располагаться сама яндекс-форма.

Добавьте стили для всплывающего окна и яндекс-формы.

.form-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.form-content {
  background-color: #fff;
  padding: 20px;
  max-width: 400px;
  max-height: 80%;
  overflow-y: auto;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.form-popup.show {
  display: flex;
}

Здесь мы задаем стили для элемента с классом "form-popup", который будет содержать всплывающее окно. Задаем ему фиксированное положение, 100% ширины и высоту, полупрозрачный цвет фона и высокий z-index, чтобы он был поверх всего содержимого страницы. Также добавляем свойства display: none и justify-content: center; align-items: center;, чтобы он не отображался изначально и чтобы содержимое было выровнено по центру. Для элемента с классом "form-content" задаем стили для самой формы.

Теперь вы можете добавить свою яндекс-форму внутри элемента с классом "form-content" и по клику на кнопку с id "open-form-btn"