Всплывающие сообщения и модальные окна

Сообщения используются в Scheduler для уведомления пользователя об ошибке, подтверждении или отклонении действия, выборе одного из вариантов и т. д.
Сообщения Scheduler основаны на форке репозитория dhtmlxMessage как их основы.
Таким образом, весь функционал dhtmlxMessage актуален для сообщений dhtmlxScheduler.

Существуют два основных типа сообщений: простое всплывающее окно и модальное окно сообщения с кнопками, которые блокируют работу приложения.

Модальное окно сообщения может принадлежать к одному из трёх возможных типов:

Окно оповещения
Подтверждающее сообщение
Modalbox

Основное всплывающее сообщение

Чтобы создать основное модальное сообщение, используйте метод scheduler.message. Обязательным параметром метода является текст сообщения:

scheduler.message("The event is updated");

Существуют три типа окон сообщений:

окно по умолчанию (type:"info")

default_message

окно с ошибкой (type:"error")

error_message

окно-предупреждение (type:"warning")

warning_message

Чтобы создать нужное окно сообщения, необходимо определить свойство type со соответствующим значением:

// создание окна сообщения об ошибке
scheduler.message({
    text: "Click on the buttons to explore Scheduler message types", 
    expire: -1, 
    type: "error"
});

Различные типы попапов и модальных окон

Чтобы применить различные стили к окну сообщения, нужно указать CSS-класс через параметр type, как описано здесь.

Позиционирование окон сообщений

По умолчанию всплывающее окно сообщения появляется в правом верхнем углу окна. Оно не мешает работе родительского приложения, в отличие от модальных окон, которые перекрывают родительское приложение и блокируют его работу. Вы можете изменить положение окна сообщения, используя свойство scheduler.message.position:

scheduler.message.position = 'bottom';

Существуют четыре допустимых значения для положения окна сообщения:

top - отображает окно сообщения в правом верхнем углу окна, выставлено по умолчанию
bottom - отображает окно сообщения в правом нижнем углу окна
left - отображает окно сообщения на левой стороне окна под Scheduler
right - отображает окно сообщения на правой стороне окна под Scheduler

Интервал истечения

Можно настроить интервал истечения для окна сообщения с помощью параметра expire. Это время после окончания которого окно сообщения исчезает (в миллисекундах). По умолчанию интервал истечения равен 4000 миллисекунд.

Вы можете либо изменить это значение, либо отменить период истечения вообще, установив expire в "-1". В этом случае окно сообщения исчезнет только по клику мыши.

scheduler.message({
    type:"error", 
    text:"Invalid data format",
    expire:10000
});

Скрытие окна сообщения через API

Чтобы скрыть указанное окно сообщения вручную и не ждать его автоматического исчезновения, можно использовать метод scheduler.message.hide(boxId). Он принимает один параметр:

boxId - идентификатор окна, указанный в конструкторе окна

scheduler.message({
    id:"myBox",
    text:"Page is loaded"
});

scheduler.message.hide("myBox");

Модальные окна сообщения

Модальные окна блокируют работу родительского приложения до тех пор, пока не будет выполнено необходимое действие (обычно клик по кнопке). Они закрываются по клику на кнопку и вызову обратного вызова, если он задан.

Существуют три типа модальных окон сообщения:

Окно оповещения - оповещающее окно с кнопкой;
Окно подтверждения - окно подтверждения с двумя кнопками (подтвердить или отменить);
Modalbox - модальное окно сообщения с произвольным количеством кнопок.

Общие свойства окон:

id - идентификатор окна сообщения;
title - текст заголовка;
type - тип окна сообщения (предупреждение или ошибка);
text - текст тела окна сообщения;
ok - текст кнопки "OK";
cancel - текст кнопки "Cancel" (для окна подтверждения);
callback - функция, вызываемая по нажатию кнопки. Принимает true или false в зависимости от нажатой кнопки;
position - на данный момент поддерживает только один вариант - "top", любое другое значение приведёт к выравниванию по центру;
width - ширина модального окна (устанавливается как CSS <length> или <percentage> значения, например "100px", "50%");
height - высота модального окна (устанавливается как CSS <length> или <percentage> значения, например "100px", "50%").

Окно оповещения (#alert)

alert

Окно оповещения содержит кнопку "OK". Чтобы задать текст кнопки "OK", используйте параметр ok с текстом в качестве значения:

краткая форма (содержит только текст сообщения - неявное использование параметра 'text'. Другие параметры имеют значения по умолчанию):

scheduler.alert("Text");

полная форма (содержит несколько доступных параметров. Не указанные параметры имеют значения по умолчанию)

scheduler.alert({
    text: "some text",
    title: "Alert",
    ok: "Ok",
    callback: function(){...}
});

Подтверждающее сообщение (#confirm)

confirm

Подтверждающее сообщение имеет две кнопки: кнопку "OK" и кнопку "Cancel". Текст кнопок определяется в свойствах с соответствующими именами.

краткая форма

scheduler.confirm("ConfirmText");

полная форма

scheduler.confirm({
    title:"Confirm",
    text:"This is a simple confirm",
    ok:"Ok",
    cancel:"Cancel",
    callback: function(result){
        if(result){
            scheduler.message("You clicked Ok");
        }else{
            scheduler.message("You clicked Cancel");
        }
    }
});

modalbox

Modalbox обладает некоторыми особенностями:

его text может содержать любой HTML контент;
может иметь множество кнопок, указанных в массиве buttons, которые содержат текстовые значения кнопок;
функция callback принимает в качестве параметра index выбранной кнопки.

scheduler.modalbox({
    title:"Settings",
    text: " ... html code here... ",
    buttons:["Save", "Defaults", "Cancel"],
    callback: function(result){
        scheduler.alert(result);
    }
});

Конфигурация кнопок modalbox

Существует два основных способа определить конфигурацию кнопок modalbox:

краткая форма:

scheduler.modalbox({
    // other settings
    buttons:["Save", "Delete", "Cancel"],
    callback: function(result){
           switch(result){
            case "0":
                //Save
                break;
            case "1":
                //Delete
                break;
            case "2":
                //Cancel
                break;
        }    
    }
});

Результатом вызова обратного вызова будет строковое представление индекса нажатой кнопки из массива ("0", "1", "2",...). Каждая кнопка будет получать CSS-класс из её метки, приведённой к нижнему регистру, например scheduler_save_button, scheduler_delete_button, scheduler_cancel_button.

Эти классы можно использовать для стилизации кнопок:

.scheduler_delete_button div{
    background:red;
}

В случае, если одинаковое имя кнопки используется в нескольких попапах и их нужно стилизовать по-разному, можно использовать конфигурацию type:

scheduler.modalbox({
    // other settings
    type:"special_popup",
    buttons:["Save", "Delete", "Cancel"]
});

Значение type будет префиксироваться строкой "scheduler_" и добавлено в качестве имени класса к элементу попапа:

.scheduler_special_popup .scheduler_delete_button div{
      background:red;
}

полная форма:

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

scheduler.modalbox({
    // other settings
    buttons: [
        { label:"Save",   css:"link_save_btn",   value:"save" },
        { label:"Cancel", css:"link_cancel_btn", value:"cancel" },
        { label:"Delete", css:"link_delete_btn", value:"delete" }
    ],
    callback: function(result){
        switch(result){
            case "save":
                //Save
                break;
            case "cancel":
                //Cancel
                break;
            case "delete":
                //Delete
                break;
        }
    }
});

Параметр label обязателен, тогда как параметры css и value могут быть опущены. Отсутствующие параметры вычисляются как в краткой форме конфигурации кнопок: CSS будет наследоваться от лейбла кнопки в нижнем регистре, а индекс кнопки будет использоваться как значение.

Префиксирование CSS и добавление в качестве класса выполняется следующим образом: префикс "scheduler_" добавляется к имени класса и применяется как класс к элементу кнопки:

.scheduler_link_delete_btn div{
      background:red;
}

Скрытие модальных окон

Чтобы скрыть модальное окно вручную, можно использовать метод scheduler.modalbox.hide(). В качестве параметра он принимает div-контейнер модального окна:

const box = scheduler.modalbox({    
    title: "Settings",
    text: " ... html code here... ",
    buttons: ["Save", "Defaults", "Cancel"],
    callback: function(result){
        scheduler.alert(result);
    }
});

scheduler.modalbox.hide(box);

Для модальных окон alert и confirm также нужно использовать метод scheduler.modalbox.hide():

const box = scheduler.confirm({
    text: "Continue?",
    ok:"Yes", 
    cancel:"No",
    callback: function(result){
        scheduler.message("Result: "+result);
    }
});

scheduler.modalbox.hide(box);

Стилизация

Для любого типа окна сообщения можно определить собственный стиль, чтобы добиться нужного внешнего вида. Обычно соответствующий CSS-класс задаётся через параметр type: вы определяете CSS-класс и устанавливаете параметр равным его имени.

Есть несколько правил, которые следует помнить при установке параметра 'type':

Чтобы задать CSS-класс для окон alert и confirm, необходимо инициализировать такое окно способом, связанным с окном (window-related)
Чтобы задать CSS-класс для окон сообщений, необходимо инициализировать такое окно обычным способом ('common')
Имя CSS-класса должно начинаться с префикса "scheduler-"
Чтобы стиль применялся корректно, следует использовать имя класса как .scheduler-some div, чтобы указать, что он предназначен для элемента внутри сообщения Scheduler.

<style type="text/css">
.scheduler-myCss div{
    font-weight:bold;
    color:wheat;
    background-color:crimson;
}
</style>


scheduler.message({ type:"myCss", text:"some text" });

Модальные окна и взаимодействие с клавиатурой

Клавиатурная функциональность для модальных окон управляется свойством scheduler.message.keyboard. Изначально оно установлено в true.

По умолчанию модальные окна блокируют события клавиатуры на странице. Разрешены только следующие клавиши:

"space" и "enter" - возвращают true как результат модального окна;
"escape" - возвращает false как результат модального окна.

Установка свойства keyboard в значение false включит клавиатурные события (и отключит вышеупомянутые клавиши):

scheduler.message.keyboard = false; 
scheduler.modalbox({...});

Это позволяет полноценно использовать клавиатуру, например для ввода значений в поля внутри модальных окон.

Need help?

Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.

Основное всплывающее сообщение​

Позиционирование окон сообщений​

Интервал истечения​

Скрытие окна сообщения через API​

Модальные окна сообщения​

Окно оповещения (#alert)​

Подтверждающее сообщение (#confirm)​

Modalbox (#modal)​

Конфигурация кнопок modalbox​

Скрытие модальных окон​

Стилизация​

Модальные окна и взаимодействие с клавиатурой​