jquery - 使用 JQuery 未打开 Bootstrap 模式窗口
问题描述
我在 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">×</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>
<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>
我测试了该事件是否有效,是的。当您单击编辑器时
解决方案
你有没有试过这个 Bootstrap $('#myModal').modal('show') 不起作用
这些是常见的错误,也许检查一下。
推荐阅读
- javascript - 如何从 API 访问数据?
- svg - CloudFront 中内容类型错误的 SVG 文件
- python - 如何比较 unigrams 的频率与 bigrams、trigrams 等的频率?
- drake - 在运行时跟踪 time_step 并记录几何逻辑错误
- r - ggplot2,如何更改条形标签的位置或添加图例
- php - For 循环在 332 次迭代后停止传递变量 - 不知道为什么
- java - 执行 java 可执行文件 (.exe) 时如何获取 CMD 的目录
- azure-devops - Azure Pipelines 中的增量构建
- android - 是否可以在不访问设置的情况下启用服务通知?
- java - NewProxyCallableStatement 不能强制转换为 SQLServerCallableStatement