I have the following javascript for the popup message box:

(function() {
let overlay, popupBox, popupImageContainer, popupMessage, popupButtons;
let autoCloseTimer = null;


// Icon SVGs inline
const icons = {
    success: '<svg height="88px" width="88px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#4A5A67;" d="M0,256.006C0,397.402,114.606,512.004,255.996,512C397.394,512.004,512,397.402,512,256.006 C512.009,114.61,397.394,0,255.996,0C114.606,0,0,114.614,0,256.006z"></path> <path style="fill:#444A54;" d="M512,256.005c0-1.715-87.286-92.274-87.286-92.274c-16.865-16.865-33.731-33.728-50.596-50.593 c-2.761-2.763-7.234-2.763-9.998,0c0,0-171.748,171.742-171.749,171.742c-14.386-14.183-28.574-28.574-42.859-42.86l-1.632-1.632 c-2.763-2.762-7.237-2.762-9.998,0l-49.489,49.489c-2.762,2.762-2.762,7.235,0,9.998l208.33,208.338l0.448,0.448 C418.981,488.966,512,383.38,512,256.005z"></path> <path style="fill:#F4F6F9;" d="M423.607,162.627l-49.489-49.489c-2.762-2.762-7.235-2.762-9.997,0L192.37,284.88l-44.491-44.491 c-2.762-2.762-7.235-2.762-9.997,0l-49.489,49.489c-2.762,2.762-2.762,7.235,0,9.997l98.979,98.986 c1.326,1.326,3.121,2.071,4.998,2.071c1.878,0,3.673-0.746,4.998-2.071l226.238-226.238 C426.369,169.862,426.369,165.389,423.607,162.627z M192.37,383.867l-88.981-88.989l39.492-39.492l44.491,44.491 c2.762,2.762,7.235,2.762,9.997,0l171.749-171.743l39.492,39.492L192.37,383.867z"></path> </g></svg>',
    warning: '<svg width="88px" height="88px" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--emojione" preserveAspectRatio="xMidYMid meet" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M5.9 62c-3.3 0-4.8-2.4-3.3-5.3L29.3 4.2c1.5-2.9 3.9-2.9 5.4 0l26.7 52.5c1.5 2.9 0 5.3-3.3 5.3H5.9z" fill="#ffce31"> </path> <g fill="#231f20"> <path d="M27.8 23.6l2.8 18.5c.3 1.8 2.6 1.8 2.9 0l2.7-18.5c.5-7.2-8.9-7.2-8.4 0"> </path> <circle cx="32" cy="49.6" r="4.2"> </circle> </g> </g></svg>',
    error: '<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 50 50" xml:space="preserve" width="88px" height="88px" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle style="fill:#D75A4A;" cx="25" cy="25" r="25"></circle> <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" points="16,34 25,25 34,16 "></polyline> <polyline style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;" points="16,16 25,25 34,34 "></polyline> </g></svg>',
    info: '<svg width="88px" height="88px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 17.75C12.4142 17.75 12.75 17.4142 12.75 17V11C12.75 10.5858 12.4142 10.25 12 10.25C11.5858 10.25 11.25 10.5858 11.25 11V17C11.25 17.4142 11.5858 17.75 12 17.75ZM12 7C12.5523 7 13 7.44772 13 8C13 8.55228 12.5523 9 12 9C11.4477 9 11 8.55228 11 8C11 7.44772 11.4477 7 12 7Z" fill="#1C274C"></path> </g></svg>'
};

// Put all logic inside DOMContentLoaded so elements exist
  document.addEventListener('DOMContentLoaded', () => {
    overlay = document.getElementById('customPopupOverlay');
    popupBox = document.getElementById('custom-popup-box');
    popupImageContainer = document.getElementById('popupImageContainer');
    popupMessage = document.getElementById('popupMessage');
    popupButtons = document.getElementById('popupButtons');

    // Validate that elements exist
    if (!overlay || !popupBox || !popupImageContainer || !popupMessage || !popupButtons) {
      console.error('Popup elements not found in DOM.');
      return;
    }

    // Attach openPopup and closePopup functions to window.customPopup here

    function openPopup(options = {}) {
      if (!options.message || typeof options.message !== 'string') {
        console.error('Popup requires a message string');
        return;
      }
      if (autoCloseTimer) {
        clearTimeout(autoCloseTimer);
        autoCloseTimer = null;
      }
      if (options.type && icons[options.type]) {
        popupImageContainer.innerHTML = icons[options.type];
        popupImageContainer.style.display = 'block';
      } else {
        popupImageContainer.innerHTML = '';
        popupImageContainer.style.display = 'none';
      }

      popupMessage.textContent = options.message;
      popupButtons.innerHTML = '';

      popupBox.classList.remove('pop-out');
      popupBox.classList.add('pop-in');

      if (options.confirmCancel) {
        const btnConfirm = document.createElement('button');
        btnConfirm.type = 'button';
        btnConfirm.className = 'custom-popup-button confirm';
        btnConfirm.textContent = options.confirmText || 'Confirm';
        btnConfirm.addEventListener('click', () => {
          closePopup();
          if (typeof options.onConfirm === 'function') options.onConfirm();
        });

        const btnCancel = document.createElement('button');
        btnCancel.type = 'button';
        btnCancel.className = 'custom-popup-button cancel';
        btnCancel.textContent = options.cancelText || 'Cancel';
        btnCancel.addEventListener('click', () => {
          closePopup();
          if (typeof options.onCancel === 'function') options.onCancel();
        });

        popupButtons.appendChild(btnConfirm);
        popupButtons.appendChild(btnCancel);
        popupButtons.style.display = 'flex';

        overlay.onclick = null;
        overlay.onkeydown = null;
      } else {
        popupButtons.style.display = 'none';

        overlay.onclick = (event) => {
          if (event.target === overlay) {
            closePopup();
          }
        };

        if (options.autoClose && typeof options.autoClose === 'number' && options.autoClose > 0) {
          autoCloseTimer = setTimeout(() => {
            closePopup();
          }, options.autoClose);
        } else {
          autoCloseTimer = null;
        }

        overlay.onkeydown = (event) => {
          if (event.key === 'Escape' || event.key === 'Esc') {
            closePopup();
          }
        };
      }

      overlay.classList.add('active');
      overlay.focus();
    }

    function closePopup() {
      if (!overlay.classList.contains('active')) return;

      if (autoCloseTimer) {
        clearTimeout(autoCloseTimer);
        autoCloseTimer = null;
      }

      popupBox.classList.remove('pop-in');
      popupBox.classList.add('pop-out');

      overlay.onclick = null;
      overlay.onkeydown = null;

      function onAnimationEnd(e) {
        if (e.animationName === 'custom-popup-pop-out') {
          overlay.classList.remove('active');
          popupImageContainer.innerHTML = '';
          popupMessage.textContent = '';
          popupButtons.innerHTML = '';
          popupButtons.style.display = 'none';

          popupBox.classList.remove('pop-out');
          popupBox.removeEventListener('animationend', onAnimationEnd);
        }
      }

      popupBox.addEventListener('animationend', onAnimationEnd);
    }

    window.customPopup = {
      open: openPopup,
      close: closePopup
    };
  });

  // Expose test triggers outside DOMContentLoaded so they exist immediately
  window.showTestMessage = function() {
    window.customPopup && window.customPopup.open({
      type: 'success',
      message: 'Operation was successful! This message will close automatically after 3 seconds.',
      confirmCancel: false,
      autoClose: 3000
    });
  };

  window.showTestConfirm = function() {
    window.customPopup && window.customPopup.open({
      type: 'warning',
      message: 'Are you sure you want to delete this item?',
      confirmCancel: true,
      confirmText: 'Yes',
      cancelText: 'No',
      onConfirm: () => alert('Confirmed!'),
      onCancel: () => alert('Cancelled!')
    });
  };
})();

I want to modify the popup when show the message only with following requirement:
1. show the confirm button below the message text 
2. the text of confirm button can be customize
3. can set show or not show the confirm button
4. can set the callback to the confirm button