I have integrated you solution to my project and I got the object null problem in popupBox and popupImageContainer, please review my code and fix it:
customPopup.js

(function() {
const overlay = document.getElementById('customPopupOverlay');
const popupBox = document.getElementById('custom-popup-box');
const popupImageContainer = document.getElementById('popupImageContainer');
const popupMessage = document.getElementById('popupMessage');
const popupButtons = document.getElementById('popupButtons');
let autoCloseTimer = null;

// Icon SVGs inline
const icons = {
    success: '<svg fill="#28a745" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.172l-3.95-3.95-1.414 1.414L9 19 20.364 7.636l-1.414-1.414z"/></svg>',
    warning: '<svg fill="#ffc107" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zM12 16v-4h0v4h0zm0 4v-2h0v2h0z"/></svg>',
    error: '<svg fill="#dc3545" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12c0 5.52 4.48 10 10 10s10-4.48 10-10C22 6.48 17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>',
    info: '<svg fill="#17a2b8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M11 17h2v-6h-2v6zm0-8h2V7h-2v2zm1-7C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z"/></svg>'
};

function openPopup(options = {}) {
    if (!options.message || typeof options.message !== 'string') {
    console.error('Popup requires a message string');
    return;
    }

    // Clear any previously set timer
    if (autoCloseTimer) {
    clearTimeout(autoCloseTimer);
    autoCloseTimer = null;
    }

    // Set the icon
    if (options.type && icons[options.type]) {
    popupImageContainer.innerHTML = icons[options.type];
    popupImageContainer.style.display = 'block';
    } else {
    popupImageContainer.innerHTML = '';
    popupImageContainer.style.display = 'none';
    }

    // Set message text
    popupMessage.textContent = options.message;

    // Clear buttons area
    popupButtons.innerHTML = '';

    // Remove any closing animation classes, add pop-in
    popupBox.classList.remove('pop-out');
    popupBox.classList.add('pop-in');

    // Handle Confirm/Cancel buttons or message only
    if (options.confirmCancel) {
    // Create Confirm button
    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();
        }
    });

    // Create Cancel button
    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';

    // Disable overlay clicks for closing
    overlay.onclick = null;
    overlay.onkeydown = null;
    } else {
    // Just a message - hide buttons container
    popupButtons.style.display = 'none';

    // Overlay click closes popup only if clicking the overlay background
    overlay.onclick = function(event) {
        if(event.target === overlay){
        closePopup();
        }
    };

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

    // Allow ESC key to close message-only popup
    overlay.onkeydown = function(event) {
        if (event.key === 'Escape' || event.key === 'Esc') {
        closePopup();
        }
    };
    }

    // Show overlay
    overlay.classList.add('active');

    // Accessibility - focus overlay so ESC works immediately
    overlay.focus();
}

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

    // Clear any timer
    if(autoCloseTimer){
    clearTimeout(autoCloseTimer);
    autoCloseTimer = null;
    }

    // Remove pop-in, add pop-out class to custom-popup-box to animate out
    popupBox.classList.remove('pop-in');
    popupBox.classList.add('pop-out');

    // Disable click and key interactions during animation
    overlay.onclick = null;
    overlay.onkeydown = null;

    // Wait for animation end event, then hide overlay and cleanup
    popupBox.addEventListener('animationend', onAnimationEnd);

    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);
    }
    }
}

// Expose globally
window.customPopup = {
    open: openPopup,
    close: closePopup
};
})();

// Example triggers:
function showTestMessage(){
customPopup.open({
    type: 'success',
    message: 'Operation was successful! This message will close automatically after 3 seconds.',
    confirmCancel: false,
    autoClose: 3000
});
}

function showTestConfirm(){
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!')
});
}

css:
  /* Overlay */
  .custom-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    outline: none; /* We'll focus() this */
  }
  .custom-popup-overlay.active {
    display: flex;
  }

  /* Animations */
  @keyframes custom-popup-pop-in {
    0% {
      opacity: 0;
      transform: scale(0.8);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes custom-popup-pop-out {
    0% {
      opacity: 1;
      transform: scale(1);
    }
    100% {
      opacity: 0;
      transform: scale(0.8);
    }
  }

  /* Popup box */
  .custom-popup-box {
    background: #fff;
    border-radius: 8px;
    max-width: 400px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;

    /* Start invisible, will be animated in */
    opacity: 0;
    transform: scale(0.8);
    animation-fill-mode: forwards;
  }

  /* Popup animations */
  .custom-popup-box.pop-in {
    animation-name: custom-popup-pop-in;
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  .custom-popup-box.pop-out {
    animation-name: custom-popup-pop-out;
    animation-duration: 0.25s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Content wrapper */
  .custom-popup-content {
    padding: 1.5rem 1.5rem 0 1.5rem;
    flex-grow: 1;
    text-align: center;
  }

  /* Image container */
  .custom-popup-image-container {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem auto;
  }
  .custom-popup-image-container svg {
    width: 64px;
    height: 64px;
    display: block;
    margin: 0 auto;
  }

  /* Message text */
  .custom-popup-message {
    font-size: 1rem;
    margin-bottom: 1.5rem;
    word-wrap: break-word;
    color: #333;
  }

  /* Buttons container */
  .custom-popup-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    border-top: 1px solid #eee;
  }
  /* Button styles */
  .custom-popup-button {
    min-width: 90px;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  .custom-popup-button.confirm {
    background-color: #28a745;
    color: white;
  }
  .custom-popup-button.confirm:hover {
    background-color: #218838;
  }
  .custom-popup-button.cancel {
    background-color: #dc3545;
    color: white;
  }
  .custom-popup-button.cancel:hover {
    background-color: #c82333;
  }

  /* Responsive tweaks */
  @media (max-width: 768px) {
    .custom-popup-box {
      max-width: 320px;
    }
  }
  @media (max-width: 480px) {
    .custom-popup-box {
      max-width: 280px;
    }
    .custom-popup-button {
      min-width: 70px;
      padding: 0.4rem 0.8rem;
      font-size: 0.9rem;
    }
  }

html (put in the footer):
<!-- Popup Structure -->
    <div id="customPopupOverlay" class="custom-popup-overlay" tabindex="-1" >
        <div id="custom-popup-box" class="custom-popup-box" role="dialog" aria-modal="true" aria-labelledby="popupTitle" aria-describedby="popupMessage">
            <div class="custom-popup-content">
            <div class="custom-popup-image-container" id="popupImageContainer">
                <!-- icon/image injected here -->
            </div>
            <div class="custom-popup-message" id="popupMessage"></div>
            </div>
            <div class="custom-popup-buttons" id="popupButtons">
            <!-- buttons injected here -->
            </div>
        </div>
    </div>