Демо

Всплывающее окно на сайте (popover форма на сайте)

Name: Всплывающее окно на сайте (popover форма на сайте)
Availability: InStock
Author: Falcon Space

Описание, как реализовать

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

Для этого мы:

создали форму
в кастомной разметке прописали разные способы вызова всплывающего окна

<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>

Другие демостенды

— Формы с вкладками (tabs) на сайте и сворачиваемыми панелями (accordeon)
— Форма в выпадающем окне на странице сайта

Что есть в базе знаний по этой теме

— Получение данных контрагента по ИНН
— Как перезагрузить страницу после сохранения формы
— Как вывести форму во всплывающем окне рядом с кнопкой (popover)
— Базовая интеграция с Jitsi Meet (звонки с видео)
— Модальная ссылка (as-modal)
— Загрузка формы в выпадающем окне (dropdown)

В чем выгода для бизнеса?

Всплывающие окна (popover) показывают дополнительную информацию или мини-формы при наведении или клике. Это экономит место на странице и даёт быстрый доступ к действиям. Вы улучшаете интерактивность и не перегружаете интерфейс.