Javascript / jQuery confirm deletion modal

[Joveice]

Hello,

 

So I would like to get a Bootstrap modal if I press my delete button, which asks if I'm sure I would like to delete the item, how can I do this?

 

This is my delete script

 

$(document).on('click', '.btnDelete', function() {

            var dataId = $(this).attr('data-id');

            var $item = $(this).closest('tr');

            $.ajax({
                url: '{{ url('/item') }}' + '/' + dataId,
                type: 'DELETE',
                data: {
                    '_token': '{{ csrf_token() }}'
                },
                success: function( msg ) {
                    if ( msg.status === 'success' ) {
                        $item.find('td').fadeOut(100, function () {
                            $item.remove();
                        });
                        Snackbar.show({
                            text: msg.msg,
                            textColor: '#5cb85c',
                            backgroundColor: '#f7f7f9',
                            pos: 'top-right'
                        });
                    } else {
                        Snackbar.show({
                            text: 'Oops.. ' + msg.msg,
                            textColor: '#ff0000',
                            pos: 'top-right'
                        });
                    }
                },
                error: function( data ) {
                    if ( data.status === 422 ) {
                        Snackbar.show({
                            text: 'Oops.. Something went wrong!',
                            textColor: '#ff0000',
                            pos: 'top-right'
                        });
                    }
                }
            });

            return false;
        });

 

This is the modal I would like to use

 

<!-- Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Are you sure you would like to delete?</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span><i class="far fa-times"></i></span>
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger">Delete</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>