Формы. Как вывести форму во всплывающем окне рядом с кнопкой (popover)

Пример формы popover - https://demo.web-automation.ru/list/watch/modalnaya-forma-ryadom-s-knopkoy--popover---31

Используем сниппет

<a href="#" class="as-popover btn btn-light" data-content="" data-title="Заголовок окна" data-trigger="manual" data-type="primary" data-size="lg" data-formcode="newForm" data-formitemid="">Show form</a>

Помимо форм можно выводить и просто любую разметку в data-content.

ВАЖНО! Формы в as-popover грузятся с января 2021 не сразу на странице (при выводе страницы), а по клику на кнопку. 

Параметры:

  • content - разметка панели (активна только если не указан код формы в data-formCode)
  • title - заголовок формы
  • trigger - Если указано click или manual, то подсказка появится по клику. Если указано focus hover, то подсказка появляется при наведении. При manual окно будет открываться и закрываться по нажатию на одну и ту же кнопку.
  • type - тип панели (success, warning, primary и т.д.)
  • size - ширина панели (sm, md, lg)
  • placement - с какой стороны открывается панель (left, right, top, bottom, top top-left, top top-right, bottom bottom-left, bottom bottom-right, left left-top, left left-bottom, right right-top, right right-bottom, auto, auto-left, auto-right, auto-bottom, auto-top, horizontal, vertical). 
  • formCode - код выводимой формы
  • formItemID - параметр, который передается в форму как itemID

Примечание: панели-подсказки закрываются, когда появляются новые подсказки на странице.

Более подробно про настройки плагина - https://plugins.krajee.com/popover-x

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

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

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK