Как сделать нормальное кроссбраузерное модальное окно с формой внутри?

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

1. **HTML структура модального окна:**

<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <form id="modal-form">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
      <button type="submit">Submit</button>
    </form>
  </div>
</div>

2. **JavaScript код для открытия и закрытия модального окна:**

// Получаем модальное окно
var modal = document.getElementById("modal");
// Получаем кнопку, открывающую модальное окно
var btn = document.getElementById("open-modal");
// Получаем элемент, который закрывает модальное окно
var span = document.getElementsByClassName("close")[0];

// Функция открытия модального окна
btn.onclick = function() {
  modal.style.display = "block";
}

// Функция закрытия модального окна при нажатии на "x"
span.onclick = function() {
  modal.style.display = "none";
}

// Функция закрытия модального окна при клике вне области модального окна
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

3. **JavaScript код для отправки формы асинхронно (без перезагрузки страницы):**

var form = document.getElementById("modal-form");

form.addEventListener("submit", function(event) {
  event.preventDefault();
  
  var formData = new FormData(form);
  
  fetch("your-server-endpoint", {
    method: "POST",
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Действия при успешной отправке формы
  })
  .catch(error => {
    console.error("Error:", error);
    // Действия при ошибке отправки формы
  });
});

4. **CSS стили для модального окна:**

.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: 10% 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;
}

Этот подход позволит создать кроссбраузерное модальное окно с формой внутри, которое будет открываться при клике на кнопку, закрываться при нажатии на "x" или клике вне области модального окна, а также отправлять данные формы на сервер асинхронно. Не забудьте заменить "your-server-endpoint" на URL вашего сервера, который будет обрабатывать данные формы.