0

У меня есть форма обратной связи на сайте. При отправке формы появляется alert(я хочу его заменить на красивое окно),с сообщением об отправке.

Как вызвать модальное окно через Jquery?

Исходный код такой min.js:

$(document).ready(function() {
    //E-mail Ajax Send
    $("form").submit(function() { //Change
        var th = $(this);
        $.ajax({
            type: "POST",
            url: "mail.php", //Change
            data: th.serialize()
        }).done(function() {
            alert("Thank you!");
            setTimeout(function() {
                // Done Functions
                th.trigger("reset");
            }, 1000);
        });
        return false;
      });

    });

В Html сделал div модальное окно с display:none с id="modal".

1 ответ 1

0
$(document).ready(function() {
  //E-mail Ajax Send
  $("form").submit(function() { //Change
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: th.serialize()
    }).done(function() {
      // $('#modal').show() // не так крисво будет
      $('#modal').addClass('active') //в css сделать крисивую стилизацию
      setTimeout(function() {
        // Done Functions
        th.trigger("reset");
      }, 1000);
    });
    return false;
  });

});

Css:

#modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 2px 2px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}
#modal.active {
    z-index: 999;
    opacity: 1;
    visibility: visible;
    transition: .3s;
} 

При это, надо убрать disaplay: none

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.