Javascript waiting result of modal

Question

I have a simple question about javascript and bootstrap modal. I have a wizard where I use file upload form, so I check the name of the file and if it doesn't contains some string I have to show a modal where ask if you want to continue anyway. How can I know which button is clicked into modal from javascript or jquery? I have this code:

if (index==3){
    var fileControl = document.getElementById('file');
    //Check if the datatable name contains idFLeet and IdCar. REturn -1 if it not contains the string
    if (fileControl.files[0].name.indexOf($("#selectedFleet").val()) > -1 && fileControl.files[0].name.indexOf($("#selectedCar").val()) > -1){
        //File contains id so you can continue the upload
        uploadFunction();
    }
    else{
        $('#warningDatatableModal').modal("show");  
         //If click on Yes call uploadFunction
        //If click on No return false
    }
}

HTML modal code:

<div class="modal" id="warningDatatableModal" data-backdrop="static" data-keyboard="false">
    <div class="modal modal-warning">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Warning</h4>
                </div>
                <div class="modal-body">
                    <p>There is a incongruity between file name and fleet and
                        car previously selected. Are you sure to continue?</p>
                </div>
                <div class="modal-footer">
                    <button id="close" type="button" class="btn btn-outline pull-left"
                        data-dismiss="modal">Close</button>
                    <button id="continueButton" type="button" class="btn btn-outline">Continue</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
</div>

After Yeldar Kurmangaliyev advice I have update my code but the wizard go ahed to the next tab instead of waiting into actual tab

if (index==3){
    var fileControl = document.getElementById('file');
    //Check if the datatable name contains idFLeet and IdCar. REturn -1 if it not contains the string
    if (fileControl.files[0].name.indexOf($("#selectedFleet").val()) > -1 && fileControl.files[0].name.indexOf($("#selectedCar").val()) > -1){
        //File contains id so you can continue the upload
        uploadFunction();
    }
    else{
        $('#warningDatatableModal').modal("show");  
        $(".modal-footer > button").click(function() {
            clicked = $(this).text();
            $("#warningDatatableModal").modal('hide');
        });
        $("#warningDatatableModal").on('hide.bs.modal', function() {
            if (clicked === "Cancel"){
                return false;
            }else {
                uploadFunction();
            }
        });
    }
}

If I put this code out of wizard works(it doesn't close modal with cancel button because I use return false that needs for my wizard), but I need to stop wizard waiting modal result.

Answer 1

You can try using the ids of the buttons and attaching a listener to see when they have been clicked like so:

$('#close').on('click',function(){
    //do something
});

$('#continueButton').on('click',function(){
    //do something
});

Answer 2

You can simply attach events to your buttons.
However, the user may want to close the window without action. The design of modal UI and its overlay suggests to click outside the window and close it.

In order to create an event which will fire event always when a user closes your modal, you need to attach to hide.bs.modal event:

$('#warningDatatableModal').on('hide.bs.modal', function() {
});

Here is the working JSFiddle demo.