A Simple Reusable JavaScript Confirmation Box with Custom Callback Actions

.sp-dialog-container {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    max-width: 500px;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    background-color: #eef6fa; /* Light soft blue background */
    border: 1px solid #b3cde0;
}

.sp-dialog-show {
    top: 20px;
    opacity: 1;
}

.sp-dialog-title {
    font-weight: bold;
    margin-bottom: 10px;
    font-size: 16px;
    color: #035b96;
}

.sp-dialog-text {
    font-size: 14px;
    margin-bottom: 15px;
    color: #033e66;
}

.sp-dialog-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.sp-dialog-button {
    padding: 5px 15px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.sp-dialog-yes {
    background-color: #cce5ff;
    border: 1px solid #b3cde0;
    color: #004085;
}

    .sp-dialog-yes:hover {
        background-color: #b3d7ff;
    }

.sp-dialog-no {
    background-color: #e6f3ff;
    border: 1px solid #cce5ff;
    color: #033e66;
}

    .sp-dialog-no:hover {
        background-color: #cce5ff;
    }

function spShowConfirmDialog(title, message, customData, onYesCallback, onNoCallback) {
    // Same function implementation as before
    const existingDialog = document.querySelector('.sp-dialog-container');
    if (existingDialog) {
        existingDialog.remove();
    }

    const container = document.createElement('div');
    container.className = 'sp-dialog-container';
    container.setAttribute('data-field', customData);

    const titleEl = document.createElement('div');
    titleEl.className = 'sp-dialog-title';
    titleEl.textContent = title;

    const messageEl = document.createElement('div');
    messageEl.className = 'sp-dialog-text';
    messageEl.textContent = message;

    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'sp-dialog-buttons';

    const yesButton = document.createElement('button');
    yesButton.className = 'sp-dialog-button sp-dialog-yes';
    yesButton.textContent = 'Yes';

    const noButton = document.createElement('button');
    noButton.className = 'sp-dialog-button sp-dialog-no';
    noButton.textContent = 'No';

    buttonsContainer.appendChild(yesButton);
    buttonsContainer.appendChild(noButton);
    container.appendChild(titleEl);
    container.appendChild(messageEl);
    container.appendChild(buttonsContainer);
    document.body.appendChild(container);

    setTimeout(() => {
        container.classList.add('sp-dialog-show');
    }, 10);

    yesButton.addEventListener('click', () => {
        const data = container.getAttribute('data-field');
        container.classList.remove('sp-dialog-show');
        setTimeout(() => {
            container.remove();
            if (onYesCallback) onYesCallback(data);
        }, 300);
    });

    noButton.addEventListener('click', () => {
        const data = container.getAttribute('data-field');
        container.classList.remove('sp-dialog-show');
        setTimeout(() => {
            container.remove();
            if (onNoCallback) onNoCallback(data);
        }, 300);
    });
}

Box Title: <input type="text" id="confirmationBoxTitle">
Box Message: <input type="text" id="confirmationBoxMessage">
Custom Data: <input type="text" id="confirmationBoxCustomData">

<script>
let title = document.getElementById("confirmationBoxTitle").value;
let msg = document.getElementById("confirmationBoxMessage").value;
let customdata = document.getElementById("confirmationBoxCustomData").value;

spShowConfirmDialog(
    title,
    msg,
    customdata,
    (customData) => {
        spShowGoodMessage("You clicked [Yes] with data: " + customData);
        // call some other function here
        // save(); 
    },
    (customData) => {
        spShowErrorMessage("You clicked [No] with data:" + customData);
        // call some other function here
        // cancel(); 
    }
);
</script>