Как привязать модальное окно?

344

01 января 2018, 10:15

    $('#sendApp').click(function () {
        var mail=$('.mail').val(), ms=$('.ms').val();
        if (!mail.match(/^[-._a-z0-9]+@(?:[a-z0-9][-a-z0-9]+\.)+[a-z]{2,6}$/)) {
            alert('Введите корректный email');
            return false;
        }
        else if(ms.length<5){
            alert('Длинна текста должна быть более 5 символов');
            return false;
        }       
        else {
            $.post(
                "/send_t.php",  {
                    ms:ms,
                    mail:mail,
                    name:$('.name').val()                 
                }, res
            );
        }
    });
function  res(data) {
    console.log(data);
    if(data==='+'){
        $('body').append('<div style="width: 482px; height: 192px; background-color: white; position:absolute; top:50%; left:50%;">Все ок!</div>')
    }
    else  alert("Что-то пошло не так")
}
});

Есть такой скрипт обратной связи, когда письмо успешно отправлено, надо выводить модальные окно, что все успешно, как его вывести? Допустим у меня уже есть код html этого сообщения, как при нажатии на крестик сделать что бы оно закрылось, ну и что бы все затемнялось и было заблокировано, как в модальных окнах. Пробовал добавить див с помощью абсолюта разместить по середине, но почему-то блок появлется вверху страницы, а не на той секции, где была нажата кнопка отправки.

Answer 1

Посмотрите jQueryUI.dialog. Хорошая штука. Может ещё что-то полезное для себя найдёте

Answer 2

var yourVar = document.getElementById("yourId");
yourVar.addEventListener("click", function() {
    // var id = yourVar.dataset.yourDataName; // с привязкой
    var id = this.dataset.yourDataName; // без привязки
    var yourNewVar = document.getElementById(id);
    // Заранее создаем класс show и добавляем его к нужному элементу
    yourNewVar.classList.toggle("show");
});

Таким способом привязываете один блок к другому.

Про дата-атрибуты почитайте тут: https://webref.ru/html/attr/data

Это только половина решения, но тут сама идея.