Диалог

<button class="btn btn--primary" type="button" data-ui-open="#dlg-invite">Пригласить участника</button>
<dialog class="dialog" id="dlg-invite" aria-labelledby="dlg-invite-t" aria-describedby="dlg-invite-d">
  <div class="dialog__head">
    <div>
      <h2 class="dialog__title" id="dlg-invite-t">Приглашение</h2>
      <p class="dialog__desc" id="dlg-invite-d">Ссылка на встречу уйдёт на указанный e-mail.</p>
    </div>
    <button class="dialog__close" type="button" data-ui-close aria-label="Закрыть">×</button>
  </div>
  <div class="dialog__body">
    <label class="field"><span class="field__label">E-mail</span><input class="field__input" type="email" id="dlg-invite-email" autocomplete="email"></label>
  </div>
  <div class="dialog__foot">
    <button class="btn btn--ghost" type="button" data-ui-close>Отмена</button>
    <button class="btn btn--primary" type="button" data-ui-close="send">Отправить</button>
  </div>
</dialog>

<button class="btn btn--danger" type="button" data-ui-open="#dlg-delete">Удалить встречу</button>
<dialog class="dialog dialog--alert" id="dlg-delete" role="alertdialog" aria-labelledby="dlg-delete-t" aria-describedby="dlg-delete-d">
  <div class="dialog__head">
    <div>
      <h2 class="dialog__title" id="dlg-delete-t">Удалить встречу?</h2>
      <p class="dialog__desc" id="dlg-delete-d">Ссылка перестанет работать. Вернуть встречу нельзя.</p>
    </div>
  </div>
  <div class="dialog__foot">
    <button class="btn btn--ghost" type="button" data-ui-close autofocus>Оставить</button>
    <button class="btn btn--danger" type="button" data-ui-close="delete">Удалить</button>
  </div>
</dialog>