Формы. Как вывести форму во всплывающем окне рядом с кнопкой (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

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