b2bon.ru

Модальные окна (cybervela.modals.js)

Инициализация

const modals = new modals(core);

Использование через HTML атрибуты.

Добавьте атрибут data-modal к элементу, который должен открывать модальное окно

<button data-modal="/path/to/content.html">Открыть окно</button>

Дополнительные атрибуты

  • data-id - уникальный идентификатор модального окна
  • data-locked - блокирует прокрутку страницы при открытом окне
  • data-classes - дополнительные CSS классы для окна
  • data-nocache - отключает кэширование загружаемого контента
  • data-closebtn - добавляет кнопку закрытия
  • data-unsteady - окно закрывается по клику в любом месте

Программное открытие окна

modals.show(href, config);

где:

  • href - URL для загрузки контента
  • config - объект с настройками: 
    {
id: 'unique_id',        // ID окна
locked: true,           // Блокировка прокрутки
classes: 'custom-class', // Дополнительные классы
nocache: true,          // Отключение кэша
closebtn: true,         // Кнопка закрытия
unsteady: true          // Закрытие по клику
}

Закрытие окна

modals.hide('modal_id');

Диалоговые окна (dialogBox)

Инициализация

const dialog = new dialogBox(core);

Типы диалогов

Alert (Информационное окно)

Простой вариант

dialog.alert('Сообщение', callback);

Расширенный вариант

dialog.alert({
  title: 'Заголовок',
  message: 'Сообщение',
  callback: function(result) {
    // result всегда true
  }
});

Confirm (Окно подтверждения)

Простой вариант

dialog.confirm('Сообщение', callback);

Расширенный вариант

dialog.confirm({
  title: 'Заголовок',
  message: 'Сообщение',
  callback: function(result) {
    // result: true - подтверждено, false - отменено
  }
});

Prompt (Окно ввода)

Простой вариант

dialog.prompt('Сообщение', callback);

Расширенный вариант

dialog.prompt({
  title: 'Заголовок',
  message: 'Сообщение',
  value: 'Значение по умолчанию',
  callback: function(result) {
    // result: введенное значение или null при отмене
  }
});

Особенности

  • Окна блокируют взаимодействие с фоном (backdrop: 'static')
  • Клавиатурная навигация отключена (keyboard: false)
  • При закрытии окна оно автоматически удаляется из DOM

Стилизация

Диалоговые окна используют классы Bootstrap:

  • .modal - основное модальное окно
  • .modal-dialog - контейнер диалога
  • .modal-content - содержимое
  • .modal-header - заголовок
  • .modal-body - тело
  • .modal-footer - футер с кнопками

Кнопки используют классы:

  • .btn-success - для кнопки подтверждения
  • .btn - для кнопки отмены
Назад
Вперед