Как сделать нормальное кроссбраузерное модальное окно с формой внутри?
Столкнулся с реальной проблемой сделать всплывающее окно с формой на сайте.
Что нужно от модального окна
1) Блокировка основного скролла и после открытия сайт остается без смещений (реализовал)
2) Блокировка скролла в iOS (это отдельная история я ее тоже уже реализовал)
3) Если внутри окна есть форма при начале ввода не должно появляться белых пустот размером с высоту клавиатуры на iOS, на форуме Apple это уже приняло статус фичи, но может есть решения уйти от этого?)
4) на некоторых андроидах при открытии клавиатуры клавиатура открывается поверх окна и тогда при открытой клаве не доскроллить до нижних полей ввода (модальное окно = высоте экрана, а по идее должно быть равно высоте экрана - размер клавиатуры)
Пример можно чекнуть тут нажав в меню на Заказать консультацию
Дополнительно:
А готовые библиотеки? Fancybox?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания кроссбраузерного модального окна с формой внутри, можно воспользоваться следующим подходом:
1. HTML структура модального окна:
```html
```
2. CSS стили для модального окна:
```html
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
```
3. JavaScript для открытия и закрытия модального окна:
```html
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
```
4. Дополнительно, можно использовать AJAX для отправки данных формы без перезагрузки страницы.
Этот код создает модальное окно, которое появляется при клике на определенную кнопку (btn), закрывается при клике на крестик или за пределами окна. В форму (myForm) можно добавить необходимые поля для ввода данных.
Помните, что для кроссбраузерной совместимости лучше использовать стандартные CSS и JavaScript функции, избегая устаревших методов.