Dialog
Стандартный HTML-тег <dialog><cb-dialog>
<dialog class="cb-dialog">
<form method="dialog">
<cb-dialog-title close>Заголовок</cb-dialog-title>
<cb-dialog-content>Контент</cb-dialog-content>
</form>
</dialog>
<button class="cb-button-board">Диалог</button>
</cb-dialog>
С нижней панелью и кнопками действий
<cb-dialog>
<dialog class="cb-dialog">
<form method="dialog">
<cb-dialog-title close>Заголовок</cb-dialog-title>
<cb-dialog-content>Контент</cb-dialog-content>
<cb-dialog-footer>
<button class="cb-button-board">Подтвердить</button>
<button class="cb-button cb-neutral">Закрыть</button>
</cb-dialog-footer>
</form>
</dialog>
<button class="cb-button-board">Диалог</button>
</cb-dialog>Атрибуты
close
Создает кнопку "закрыть". Применяется на элементе cb-dialog-title.
data-close
Добавляет любому элементу диалога поведение кнопки "закрыть".
JavaSctipt
const dialog = document.querySelector('cb-dialog')
dialog.button = myButtonПривязывает кнопку, которая открывает диалог
События
open
Срабатывает, когда элементу
dialog добавлен атрибут open dialog.addEventListener('open', callback)