Настройка диалоговых окон и alert окошек

Диалоговые окна

В диалоговых окнах обычно выводится либо таблица, либо форма. 

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

Как выводится форма в диалоговом окне

Как выводится табица в диалоговом окне 

Также можно вывести в модальном окне произвольную разметку с помощью as-modal.  

 

Заголовок модалного окна обычно указывается у модальной ссылки в параметре data-title. Если его нет, то верхняя часть диалогового окна не выводится.

Размер окна зависит от параметра data-big (если он равен 1, то выводится окно на весь экран).

У форма может быть кнопка сохранения, если она нужна, то указывается в параметре data-btnText.

Если в диалоговом окне есть кнопка Сохранения, то она будет вызываться по Ctrl +Shift + S

Кнопка Закрыть работает по клавише Esc

Есть дополнительные глобальные системные настройки диалоговых окон (в as.systemOptions.js): 

  • "modal.headerBack" - задает цвет заголовка (primary, secondary и т.д.)
  • "modal.bodyBack" - задает цвет тела (primary, secondary и т.д.)
  • "modal.footerBack" - задает цвет подвала окна (primary, secondary и т.д.)
  • "modal.enablePrevNextModal" -  если true, то в заголовке будет появляться кнопки Назад,Вперед (для перехода к предыдущему закрытому окну). 
  • "modal.changePageTitleWithModal" - если true, то заголовок страницы во вкладке браузера меняется на заголовок диалогового окна.

Как сделать кастом кнопку закрытия диалогового окна

Используйте такую ссылку: 

<a href="#"  class="text-decoration-none text-muted" 
       data-dismiss="modal"><i class="fa fa-times"></i></a>

Всплывающие сообщения справа вверху

Всплывающее окошко - это обычно реакция на какое-то действие в системе - сохранение в форме, результат операции в таблицах и т.д. 

Обычно в модели результата (например в SaveItem формы передаются такие параметры и они напрямую влияют на это окошко):

  • Result - если 0, то это ошибка и будет красный цвет окошка (danger), если 1 - то зеленый цвет - Success результат. 
  • Msg - текст сообщения (может быть разметка).
  • Icon - иконка слева от соощения (Font Awesome). 
  • Type - тип окошка (secondary, warning и т.д.), задает цвет. 

Иконка в заголовке берет либо от элемента с классом sidebar-brand-icon на странице, либо из настойки "alert.headerIcon" из as.systemOptions (может быть как FontAwesome, так и путь к файлу).     

Заголовок в окне берется из элемента с классом sidebar-brand-text, либо из настройки "alert.headerTitle" из as.systemOptions.

Дополнительные глобальные настройки из as.systemOptions.js:

  • "alert.defaultDelay" - задает количество миллисекунд, сколько висит окно (7000 мс по умолчанию).
  • "alert.disableProgress" - если true, то отключается показ нижней полоски, показывающей сколько будет висеть еще окно.
  • "alert.alwaysHidePrev" - если true, то при показе нового окошка предыдущи окна будут всегда скрываться. 
  • "alert.disableTimestamp" - если true, то в загоовке окна не будет показано, сколько прошло времени с момента появления окошка. 
Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Выгода от использования Falcon Space

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK