Модальная контекстная форма рядом с кнопкой (popover)

В этом примере было реализован вызов всплывающего окна с разными настройками.

Для этого мы:

  • создали форму
  • в кастомной разметке прописали разные способы вызова всплывающего окна
<p>
<a href="#" class="as-popover btn btn-success"
     data-title="Пример 1" data-trigger="manual" 
     data-type="primary" data-size="lg" 
     data-formcode="watch_reset" data-formitemid="">1 Обычная форма</a>
</p>
<p>
<a href="#" class="as-popover btn btn-success" data-content="Надпись <b>жирным</b> текстом" 
     data-title="Пример 2" data-trigger="manual" 
     data-type="primary" data-size="lg" 
     data-formitemid="">2 Кастомная разметка</a>
</p>
<p>
<a href="#" class="as-popover btn btn-success" data-content="Надпись <b>жирным</b> текстом" 
     data-title="Пример 3" data-trigger="focus hover" 
     data-type="primary" data-size="lg" 
     data-formitemid="">3 Появление при наведении</a>
</p>
<p>
<a href="#" class="as-popover btn btn-success" data-content="Надпись <b>жирным</b> текстом" 
     data-title="Пример 4" data-trigger="focus hover" 
     data-type="warning" data-size="lg" 
     data-formitemid="">4 Тип окна WARNING</a>
</p>
<p>
<a href="#" class="as-popover btn btn-success" data-content="Надпись <b>жирным</b> текстом" 
     data-title="Пример 5" data-trigger="focus hover" 
     data-type="primary" data-size="sm" 
     data-formitemid="">5 Маленький размер</a>
</p>
<p>
<a href="#" class="as-popover btn btn-success" data-content="Надпись <b>жирным</b> текстом" 
     data-title="Пример 6" data-trigger="focus hover" 
     data-type="primary" data-size="sm" data-placement="left"
     data-formitemid="">6 Появление слева</a>
</p>

Другие модули

Последние обновления

Вывод временной линии timeline

Визуализация 13.09.2021

Вывод диаграммы типа pie

Визуализация 13.09.2021

Вывод диаграммы вида radar

Визуализация 13.09.2021

Вывод графиков line

Визуализация 13.09.2021

Вывод гистограммы bar

Визуализация 13.09.2021

Вывод полосок прогресса

Визуализация 13.09.2021

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Платформа Falcon Space

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

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

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

по ходу эксплуатации программы

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

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