Для создания всплывающего окна с яндекс-формой можно использовать следующий подход:
Создайте кнопку или ссылку, по клику на которую будет открываться всплывающее окно.
<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"
