Как вместо стандартного alert вызывать модальное окно?

Question

[Александр Коновалов]

Здравствуйте! Есть форма обратной связи. При успешной отправки сообщения вызывается alert, что сообщение успешно отправлено:

<script>
                                document.getElementById('feedback-form').addEventListener('submit', function(evt){
                                  var http = new XMLHttpRequest(), f = this;
                                  evt.preventDefault();
                                  http.open("POST", "send.php", true);
                                  http.onreadystatechange = function() {
                                    if (http.readyState == 4 && http.status == 200) {
                                      alert(http.responseText);
                                      if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поле сообщения, если в ответе первым словом будет имя отправителя
                                        f.messageFF.removeAttribute('value');
                                        f.messageFF.value='';
                                      }
                                    }
                                  }
                                  http.onerror = function() {
                                    alert('Извините, данные не были переданы');
                                  }
                                  http.send(new FormData(f));
                                }, false);
                                </script>

echo $_POST['nameFF'].', Ваше сообщение получено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }

Мне нужно показывать вместо alert модальное окно, код у него такой:

<div class="overlay_popupIng"></div>
<div class="popupE" id="#otzyvy">
<div class="box-modal_close arcticmodal-close">+</div>
  <div class="objectE">
        <div class="messengers-container">
      <div class="messengers-content">
          <div id="mu-hero" class="" role="banner">
                <div class="mu-hero-overlay">
                    <div class="mu-hero-area">
                        <div class="mu-hero-featured-area">
                            <div class="mu-hero-featured-content">
                                <h1>Спасибо за заявку!</h1>
                                <h2>Наши менеджеры свяжутся с Вами в ближайшее время.</h2>
                                <!-- <img src="forma/assets/images/smile.png" alt="img" class="modal__img_sm"> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
      </div>
  </div>
  </div>
</div>

Как это сделать?

Answer 1

[Николай Чуприк]

HTML-код модального окна должен присутствовать на странице, но быть скрытым средствами CSS:

#otzyvy {
    display: none;
}

Чтобы его отобразить (вместо alert) пишем:

document.querySelector( '#otzyvy .mu-hero-featured-content' ).innerHTML = http.responseText;
document.querySelector( '#otzyvy' ).style.display = 'block';

Comments

[Александр Коновалов]

Николай Чуприк я что-то не понял, куда вторую строку вписать?

[Николай Чуприк]

Александр Коновалов, что вы называете второй строкой?

[Александр Коновалов]

Николай Чуприк, чтобы его отобразить (вместо alert) пишем - вот эти 2 строки, куда их вписать?

[Николай Чуприк]

Там, где у вас в коде строка с alert. Вместо него.

[Николай Чуприк]

И ещё исправьте в HTML-разметке id = "otzyvy". Уберите #.

[Александр Коновалов]

Николай Чуприк, спасибо!

[Александр Коновалов]

Николай Чуприк, обнаружил один косяк. Нужно, чтобы класс .overlay_popupIng тоже становился видимым, как и сюда добавить display:block?

[Николай Чуприк]

Тогда вместо #otzyvy сразу его и показывайте.

document.querySelector( '.overlay_popupIng' ).style.display = 'block';

Я почему использовал селектор по id? Класс — это не индивидуальная характеристика этого модального окна, а вполне может быть всех модальных объектов, поэтому я взял по id. Но можно и по классу отбирать.