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

Question

У меня есть форма обратной связи на сайте. При отправке формы появляется 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".

Answer 1

$("#modal").css("display", "block");

Answer 2

$(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

БЛОГ НА HUSL

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

Ответы (2 шт):