MODX. Всплывающие сообщения. jGrowl.

Что такое jGrowl

По умолчанию компоненты Modx для всплывающих сообщений используют плагин jQuery https://github.com/stanlemon/jGrowl , он вшит в сами компоненты, он используется как в формах связи (Formit, Ajax Form) так и в компонентах магазина Minishop2

CSS кастомизация

Часто возникают задачи по выводу сообщений по середине экрана и кастомизации внешнего вида ниже приведён пример как стилями кастомизировать jGrowl по центру

/*Кастомизация всплывающих сообщений Formit'a*/
#jGrowl {
    font-size:18px;
    margin:0 12px 0;
}
#jGrowl:before{
    content: '';
    position: fixed;
    width: 200%;
    height: 200%;
    background: rgba(0, 0, 0, 0.5);
    margin-top: -50%;
    margin-left: -50%;
}
.jGrowl.top-right {
    left: calc(59% - 400px) !important;
    top:35% !important;
}
@media screen and (max-width: 768px){
    .jGrowl.top-right {
        left: 0 !important;
    }
}
#jGrowl .jGrowl-notification {
    position: relative;
    width: 400px;
    padding: 50px 40px;
    text-align: center;
    background: none repeat 0 0 #fff !important;
    box-shadow: none !important;
    border: 0 !important;
    z-index: 1000;
    border-radius: 4px;
}
#jGrowl .jGrowl-notification .jGrowl-close {
    position: absolute;
    right: 2px;
    top: 2px;
    font-weight: normal;
    width: 45px;
    height: 45px;
}
#jGrowl .jGrowl-notification .jGrowl-close:before{
    font-family: "Font Awesome 5 Free";
    font-weight: 400;
    content: "\f057";
    color: #777;
    font-size: 30px;
}
#jGrowl .jGrowl-notification .jGrowl-message {
    color:#000 !important;
}

Обратите внимание что в CSS используется FontAwesome

JS скрытие

Если у вас есть необходимость закрывать jGrowl в своём JS коде, то можете воспользоваться следующим вариантом

/*Очищаем html после закрытия уведомления*/
$.jGrowl.defaults.close = function(e,m) {
    $("#jGrowl").hide();
    $('#jGrowl').remove();
};

У jGrowl есть и другие ивенты, например

$.jGrowl.defaults.beforeOpen = function(e,m) { $("#jGrowl").show(); };

Подробнее мы можете посмотреть в документации

Текст внутри всплывающих сообщений

Если вам необходимо отредактировать текст, который отображается в дефолтных сообщениях, например minishop’a, то вам следует искать его в словарях в административной панели.

Альтернатива SweetAlert2

В качестве альтернативы можно использовать пакет https://modstore.pro/packages/alerts-mailing/sweetalert2 вырезав вызов jGrowl из скриптов