Модальное окно Bootstrap не открывается с помощью JQuery

Question

У меня есть несколько модальных окон в представлении CodeIgniter, и я не вижу их, когда пытаюсь открыть их с помощью JQuery. Я пробовал это с .modal ('toggle') и .modal ('show') без успеха. Если я использую кнопку с data-toogle и data-target, она работает без проблем. Из того, что я видел с помощью инспектора кода Chrome и некоторых деталей, которые я вижу на странице, когда я нажимаю, чтобы открыть модальное окно, страница действует так, как будто она открылась, но не показывает ее мне. Я вижу, что в теге body появляется модальный открытый класс, но окно не появляется.

Я поставил здесь часть кода.

Одно из модальных окон:

код одного из модальных окон

    <!-- MODAL EDIT -->
    <form>
        <div class="modal fade" id="Modal_Edit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Editar Cliente</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <input type="hidden" name="cliente_id_edit" id="cliente_id_edit">
              <div class="modal-body">
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Código</label>
                        <div class="col-md-10">
                          <input type="text" name="codigo_cliente_edit" id="codigo_cliente_edit" class="form-control" placeholder="Código do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Nome</label>
                        <div class="col-md-10">
                          <input type="text" name="nome_cliente_edit" id="nome_cliente_edit" class="form-control" placeholder="Nome do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">CPF</label>
                        <div class="col-md-10">
                          <input type="text" name="cpf_cliente_edit" id="cpf_cliente_edit" class="form-control" placeholder="CPF do cliente">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">Sexo</label>
                        <div class="col-md-10">
                            <div class="form-check-inline form-check">
                                <label for="sexo1" class="form-check-label ">
                                    <input type="radio" id="sexo1_edit" name="sexo_cliente_edit" value="F" class="form-check-input">F
                                </label>&nbsp;&nbsp;
                                <label for="sexo2" class="form-check-label ">
                                    <input type="radio" id="sexo2_edit" name="sexo_cliente_edit" value="M" class="form-check-input">M
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-2 col-form-label">E-mail</label>
                        <div class="col-md-10">
                          <input type="text" name="email_cliente_edit" id="email_cliente_edit" class="form-control" placeholder="E-mail do cliente">
                        </div>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                <button type="button" type="submit" id="btn_update" class="btn btn-primary">Enviar</button>
              </div>
            </div>
          </div>
        </div>
        </form>
    <!--END MODAL EDIT-->

Код JQuery для открытия модального

    $('#show_data').on('click','.item_edit',function(){

        $('#Modal_Edit').modal('show');

    });

Код, по которому осуществляется звонок:

<a href="javascript:void(0);" class="btn btn-info btn-sm item_edit" data-codigo_cliente="001" data-nome_cliente="Luis" data-cpf_cliente="123456789" data-sexo_cliente="M" data-email_cliente="mail@mail.com" data-cliente_id="1">Editar</a>

Я проверил, работает ли событие, и да. Когда вы нажимаете на Editar

Answer 1

Я думаю, что это тег <form>, попробуйте переместить его внутрь .modal-body. Тогда сделай

$('#show_data').click(function() {
    $('#Modal_Edit').modal('show');
});

для кнопки отправки:

$('#btn_update').click(function() {
    $('form').submit();
});

Answer 2

Возможно, вы попробовали это Bootstrap $ ('# myModal'). Modal ('show') не работает

Это распространенные ошибки, возможно, проверьте их.