Всплывающее окно на сайте (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>

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

Редактирование одиночных полей формы в личном кабинете

Кнопка очистки формы

Цвет фона формы. Как изменить фон формы на сайте

Сообщение-уведомление на сайте вместо показа формы (NoForm). Отображение сообщения о недоступности формы

Работа с буфером обмена на сайте. Как скопировать текст в буфер обмена

Обновление содержимого страницы сайта (Refresh container). Перезагрузка части страницы

Любой вид формы на сайте - гибкая разметка формы

Выбор адреса и координат с подгрузкой из Google Maps API

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

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

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

Платформа Falcon Space

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

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

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

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

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

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