Подтверждения и сообщения: modal, dropdown, overlay, Data API и AJAX.
Способы отображения
Dropdown, overlay в модалке и боковой панели.
Под каждым примером — его HTML, JavaScript и CSS. Подключите JS из
vgapp и SCSS из vgapp/scss (или готовый CSS пакета).
Кнопки и раскладка используют OKAUX 1.0.2; тема сайта управляется OKAUX.
Компактный dropdown
Панель располагается рядом с relatedTarget. Клик вне панели или Esc отменяет действие; без опорного элемента используется modal.
Ожидает действия.
HTML
<button type="button" class="btn btn-primary btn-sm" id="alert-dropdown-trigger">Подтверждение рядом с кнопкой</button>
<p id="alert-dropdown-result" class="mt-3 mb-0" role="status">Ожидает действия.</p>
JavaScript
/**
* Описание: рабочий пример VGAlert для копирования и демо.
* Возможности: запуск публичного API и отображение результата без изменения данных.
*/
import { VGAlert } from 'vgapp';
function initAlertDemo() {
const button = document.querySelector('#alert-dropdown-trigger');
if (!button) return;
const result = document.querySelector('#alert-dropdown-result');
button.addEventListener('click', () => {
VGAlert.call({
...{
"size": "compact",
"theme": "warning",
"render": {
"type": "dropdown"
},
"dropdown": {
"placement": "bottom-start"
},
"message": {
"title": "Продолжить?",
"description": "Повторите пример или отмените действие."
},
"buttons": {
"agree": {
"text": "Продолжить",
"class": [
"btn-primary",
"btn-sm"
]
},
"cancel": {
"text": "Отмена",
"class": [
"btn-surface",
"btn-sm"
]
}
}
},
relatedTarget: button,
}, 'ru')
.then(value => { result.textContent = 'Подтверждено: accepted = ' + value.accepted; })
.catch(error => { result.textContent = 'Отменено: accepted = ' + error.accepted; });
});
}
initAlertDemo();
CSS
/* Дополнительные стили не требуются. */
Overlay внутри VGModal
Сравните render.dismiss: false и true. После согласия родитель остаётся открытым или закрывается; после отмены сохраняется.
