1 files changed, 22 insertions, 13 deletions
diff --git a/web_src/js/features/comp/ConfirmModal.ts b/web_src/js/features/comp/ConfirmModal.ts
index 1ce490ec2e..81ea09476b 100644
--- a/web_src/js/features/comp/ConfirmModal.ts
+++ b/web_src/js/features/comp/ConfirmModal.ts
@@ -5,20 +5,29 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts';
 
 const {i18n} = window.config;
 
-export function confirmModal({header = '', content = '', confirmButtonColor = 'primary'} = {}): Promise<boolean> {
+type ConfirmModalOptions = {
+  header?: string;
+  content?: string;
+  confirmButtonColor?: 'primary' | 'red' | 'green' | 'blue';
+}
+
+export function createConfirmModal({header = '', content = '', confirmButtonColor = 'primary'}:ConfirmModalOptions = {}): HTMLElement {
+  const headerHtml = header ? `<div class="header">${htmlEscape(header)}</div>` : '';
+  return createElementFromHTML(`
+<div class="ui g-modal-confirm modal">
+  ${headerHtml}
+  <div class="content">${htmlEscape(content)}</div>
+  <div class="actions">
+    <button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
+    <button class="ui ${confirmButtonColor} ok button">${svg('octicon-check')} ${htmlEscape(i18n.modal_confirm)}</button>
+  </div>
+</div>
+`);
+}
+
+export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<boolean> {
+  if (!(modal instanceof HTMLElement)) modal = createConfirmModal(modal);
   return new Promise((resolve) => {
-    const headerHtml = header ? `<div class="header">${htmlEscape(header)}</div>` : '';
-    const modal = createElementFromHTML(`
-      <div class="ui g-modal-confirm modal">
-        ${headerHtml}
-        <div class="content">${htmlEscape(content)}</div>
-        <div class="actions">
-          <button class="ui cancel button">${svg('octicon-x')} ${htmlEscape(i18n.modal_cancel)}</button>
-          <button class="ui ${confirmButtonColor} ok button">${svg('octicon-check')} ${htmlEscape(i18n.modal_confirm)}</button>
-        </div>
-      </div>
-    `);
-    document.body.append(modal);
     const $modal = fomanticQuery(modal);
     $modal.modal({
       onApprove() {