0

Boa tarde.

Eu tenho uma página em PHP, onde nela há uma div para abrir um modal.

(código da div e do botão para chamar o 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>

Aqui está o código para abrir o 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)

Esta parte de código está tudo em um mesmo arquivo denominado Cargos.php.

Segue abaixo o conteúdo do 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 -->

O problema é que, quando eu clico no "X" para fechar o modal, ou no botão de cancelar, o modal não fecha :/ Alguma dica? Agradeço desde já!

1
  • No console, (F12 no Chrome) aparece algum erro? Commented 23/07/2018 às 18:10

1 Resposta 1

2

Gente já descobri a resposta.. O novo Bootstrap, necessita tar a classe modal-dialog para poder fechar o modal.. Eu adicionei a classe "modal-dialog" na classe onde recebe a o conteúdo do modal via ajax. (Classe: ConteudoModalCargos). E removi ela do meu arquivo do modal, ficou assim o cód.

Arquivo a 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);
                    }
                });
            });

Arquivo onde há o conteudo do modal:

<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 o por que disso acontecer eu não tenho a mínima ideia, já li e reli a documentação do boostrap, e não diz nada a respeito.. se alguém souber algo pode comentar aqui.. agradeço a atenção de todos!

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .