Modal does not close, boostrap 4.0

Good afternoon.

I have a page in PHP, where there is a div to open a modal.

(div code and button to call modal)

<!-- Modal para adicionar cargos -->
        <div class="modal fade" id="Modal_AddCargos" tabindex="-1" role="dialog" aria-labelledby="Modal_ModalAddCargos" aria-hidden="true">
   <div class="ConteudoModalCargos">

   </div>
</div>

<div 
    class="BotaoFlutuavel ShowTooltip" 
    data-toggle="modal"
    data-placement="left"
    data-target="#Modal_AddCargos"
    title="Cadastrar Novo Cargo">
    <i class="IconePlus">+</i>
</div>

Here is the code to open the modal via ajax.

 // Abrir Modal Cargos
            $('#Modal_AddCargos').on('show.bs.modal', function (e) 
            {
                let IdCargo = $(e.relatedTarget).data('id');

                $.ajax(
                {
                    type: 'POST',
                    url: 'ModalCargo.php',
                    data:
                    {
                        IdCargo: IdCargo
                    }, 
                    success: function (data) 
                    {
                        $('.ConteudoModalCargos').html(data);
                    }
                });
            }); 
        // FIM, $('#Modal_AddCargos').on('show.bs.modal', function (e)

This part of code is all in the same file called Charges.php.

The following is the modal content:

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header" >
            <h5 class="modal-title" id="TituloModalCargos">Cadastrar Cargos</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <form id="FormCargos" name="FormCargos">
                <div class="row">
                    <div class="form-group col-sm">
                        <label for="edtDescricaoCargo" class="FormLabelRequired" >Descrição </label> 
                        <input type="text" id="edtDescricaoCargo" name="edtDescricaoCargo" class="form-control maxlength" maxlength="50" value="<?=$Cargo->getDescricao();?>" placeholder="Digite a descrição" required />
                    </div> <!-- FIM, edtDescricaoCargo -->
                </div> <!-- FIM, row.Descrição -->

                <!-- HIDDEN -->
                <input type="hidden" name="edtIdCargo" id="edtIdCargo" value="<?=$Cargo->getIdCargo();?>"> 
            </form> <!-- FIM, form#FormCargos -->
        </div> <!-- FIM, .modal-body -->

        <div class="modal-footer">
                <a href="#" class="btn btn-default mr-auto" data-dismiss="modal" title= "Cancelar Cadastro" aria-label="close">Cancelar</a>

                <a href="#" id="BtnGravarCargo" class="btn btn-primary" title="Gravar Cargo">Gravar</a>
            </div> <!-- FIM, .row /modal-footer -->
        </div> <!-- FIM, modal-footer -->
    </div> <!-- FIM, modal-content -->
</div> <!-- FIM, .modal-content -->

The problem is that when I click on the "X" to close the modal, or on the cancel button, the modal does not close: / Any tips? Thank you in advance!