在ajax之前不显示模态

Question

I have an Javascript on click event that will loop all of the json to store it to database with ajax and before that i already add some modal to popup before the loop is running. but the problem is the modal doesn't pop up before the loop is running and pop up after the loop is running this is my code this i my javascript

            $.fn.dataTable.ext.buttons.Mapping = {
                text: 'Save To Database',
                action: function (e, dt, node, config) {

                    $('#modal-respondent-upload').modal('show');
                    var filename = $("#xlf").val().replace("C:\\fakepath\\", "");

                    var obj = jQuery.parseJSON(output);
                    $.each(obj.hasil, function (key, value) {
                        var dataRespondent = {
                            json: JSON.stringify(value),
                            importSessionDataID: 1
                        }
                        console.log(dataRespondent);
                        var respondentID = simpleAjaxRequest(dataRespondent, "/UploadExcel/CreateRespondent/", "Import Respondent Data");
                    });                    
                }
            };

function simpleAjaxRequest(data, url, text) {
    var id = 0;
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        async: false,
        success: function (data) {
            //moveProgressBar(10, text);
            id = data;
        }

    });
    return id;
}

and my modal is like this

<div class="modal fade" role="dialog" id="modal-respondent-upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <h1><span id="kondisi-data-modal">0</span>/<span id="jumlah-data-modal">0</span></h1>
        </div>
    </div>
</div>