Modal doesn’t close, boostrap 4.0

Question

Good afternoon.

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

(div and button code to call the 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 piece of code is all in the same file called Cargos.php.

Below is the content of the modal:

<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 the cancel button, the modal does not close :/ Any tips? Thanks in advance!

Answer 1

People already figured it out. The new Bootstrap requires the modal-dialog class to be able to close the modal.. I added the "modal-dialog" class in the class where it receives the modal content via ajax. (Class: Countdown). And I removed it from my modal file, so was Cód.

Archive to Cargos.php:

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

        </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>

JS do cargo.php:

 $('#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) 
                    {
                        $('#Modal_AddCargos .modal-dialog').html(data);
                    }
                });
            });

Archive where there is the modal content:

<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 -->

agr why this happens I have no idea, I have read and reread the documentation of boostrap, and it says nothing about it.. If anyone knows anything, they can comment here.. thank you for your attention!