Prevent modal from closing based on condition

[ibrahimoguzhany]

I need to prevent the user from closing the modal if they have made changes to the form inside the modal (or based on some logic). I've been unable to find a way to achieve this. Is it possible to prevent the modal from closing and show another modal?

$(document).on('modal:before-close', function(event, modal) {
    if ($(modal).is('.modal') && $('#updateProfileForm').length && !pendingModalClose) {
        const currentFormState = $('#updateProfileForm').serialize();
        if (initialFormState !== currentFormState) {
            event.preventDefault(); // doesn't work
            pendingModalClose = true;
            $("#unsavedChangesModal").modal({
                fadeDuration: 250,
                escapeClose: false,
                clickClose: false,
                showClose: false
            });
        }
    }
});

$(document).on('modal:before-close', function(event, modal) {
    $("#unsavedChangesModal").modal({
    fadeDuration: 250,
    escapeClose: false,
    clickClose: false,
    showClose: false
});

When I do this, it automatically closes the main modal, which is something I do not want. I want to show the warning modal on top of my main modal. Can you help, please?