Question

我在CodeIgniter视图中有几个模式窗口，当我尝试使用JQuery打开它们时看不到它们。我已经尝试了.modal（'toggle'）和.modal（'show'）的尝试，但均未成功。如果我将按钮与data-toogle和data-target一起使用，则可以正常使用。根据我使用Chrome代码检查器看到的内容以及在页面上看到的一些详细信息，当我单击以打开模式窗口时，页面的行为就好像它已打开但没有显示给我。我看到在body标签中出现了modal-open类，但没有出现窗口。

我把部分代码放在这里。

模态窗口之一：

其中一个模态窗口的代码

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

您可能尝试过一些 Bootstrap $('#myModal').modal('show') is not working

它们是常见错误，也许可以检查一下。

Answer 2

我认为它是<form>标记，请尝试将其移动到.modal-body内。然后做

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

提交按钮：

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

使用JQuery无法打开Bootstrap模式窗口

2 个答案: