JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div><button id="btnSubmit">Click Me</button></div>
<br />
<div><span class="bold">Result: </span><span id="modres">None</span></div>

<div class="modal fade" id="modConfirm" tabindex="-1" role="dialog" aria-labelledby="modConfirmTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="modConfirmTitle">Notice</h4>
            </div>
            <div class="modal-body">
                <div><span class="bold px15" id="modActualCnt"></span> of <span class="bold px15" id="modExpectedCnt"></span> anticipated jobs were claimed with the filters.</div>
            <div>Discrepancies occur as jobs are added/processed in real time.</div>
                <br />
                <div>
                    CANCEL the process or it will CONTINUE in <span class="bold px15" id="secCD">5</span> seconds...
                </div>
            </div>
            <div class="modal-footer">
                <button id="btnCancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal">Continue Immediately</button>
            </div>
        </div>
    </div>
</div>

CSS

.bold{font-weight:bold;}
.px15{font-size:15px;}

JavaScript

$("#btnSubmit").click(function() {
    $("#modres").html("...");
    var obj = {ActualCnt: 105, ExpectedCnt: 100};
     $.ajax({
        type: "POST",
        url: "/echo/json/",
         data: {json: JSON.stringify(obj)},
         success: callback
    });
});


function callback(json) {
    $("#modActualCnt").html(json.ActualCnt);
    $("#modExpectedCnt").html(json.ExpectedCnt);
    var abort = false;  //flag set when cancel is pressed
    var MAX = 5;  //15 second timer.  Adjust this constant as desired
    var countdown = MAX;  //decremented in window.setInterval callback
    var intervalID;  //set by window.setInterval.  Referenced in window.clearInterval.
 
    $("#modConfirm").modal('show')  //shows the dialog immediately
    
    //add click event to cancel button.  Cleaning up any residual handlers
    //this simply sets the abort flag
    $("#btnCancel").off("click").on("click", function(){abort=true;});
 
    //fires every time the dialog closes (accepting or canceling)
    $('#modConfirm').off("hidden.bs.modal").on('hidden.bs.modal', modalclose);
 
    //setting the interval.  1000ms = 1 second callback intervals
    var intervalID = window.setInterval(function () {
        countdown -= 1;
        $("#secCD").html(countdown);  //adjust the ticker visually
        if (countdown == 0) {
            //closes the dialog...which in turn fires the the modalclose event.
            $("#modConfirm").modal("hide");  
        }
    }, 1000);
 
    /*** modalclose ***/
    //This is called whenever the modal is closed.  The modal is closed in all situations.
    //clear timer, revert markup, ajax accept or deny
    function modalclose() {
        window.clearInterval(intervalID);
        $("#secCD").html(MAX);
        countdown = MAX;
        if (abort) {
            abort = false;
            //ajax deny
            $("#modres").html("Deny");
            return;
        }
        //ajax accept
        $("#modres").html("Accept");
    }
}