jquery中调用模态框手动显示函数modal('show')失效,然后曲线救了

写了一个html页面,本地访问服务端地址,本地数据读取显示渲染等操作都已经OK了,然后开心的发给后台同事,让他们合入一下。然后后台同事通过比较工具合入了,然后激动的测试一下,就发现有一个关于删除的模态框出不来拉。真是脑壳疼啊。然后开始检查,发现并不是后台的问题,而是html页面中的modal(‘show’)这一句执行的不起作用。百度了很久很久吧,始终没用找到解决方案。然后实在没办法了,想了另一个方法,曲线救国一下吧。

需求是这样的,有一个删除按钮。下方一个table,点击删除之前,有两种情况。A:用户没用选择,所以点击删除时弹出提示框,要用户至少选择一个;B:用户选择了,弹出给用户确认是否删除的提示框。之前做法是在btn的click事件中通过对checkBox的选择情况判断,再来决定手动显示哪一个modal。代码如下

本地webstore调试ok的代码,是两个modal。

<div class="modal fade" id="delSpellNoSelect" tabindex="-1" role="dialog" aria-labelledby="spellNoSelect" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
                    <h5 class="modal-title" id="spellNoSelect">提示h5>
                div>
                <div class="modal-body">请至少选择一条咒语!<br>div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定button>
                div>
            div>
        div>
    div>
    <div class="modal fade" id="confirmDelSpell" tabindex="-1" role="dialog" aria-labelledby="delSpellInfo" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
                    <h5 class="modal-title" id="delSpellInfo">提示h5>
                div>
                <div class="modal-body" id="confirmDelSpellBodyContent">确认删除此咒语?<br>div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
                    <button type="button" id="btnConfirmDelSpell" class="btn btn-primary" data-dismiss="modal">确定button>
                div>
            div>
        div>
    div>

再看js中btn的click事件,判断checkLength的值手动显示弹出不同的modal。

jQuery(document).ready(function($) {
   $("#btnDelSpell").click(function () {
    var checkLength = $("input:checkbox[name='ckb']:checked").length;
    if(checkLength == 0) {
        $('#delSpellNoSelect').modal('show');
        return;
    }
    $("#confirmDelSpell").modal('show');
   });
});

这种方式就是给了后台那边,就是显示不出来modal。后台那边采用的lua脚本语言。所以就决定换一种方案了。

修改后html代码,只留一个modal了,然后body部分增加了一个id:id="confirmDelSpellBodyContent"用来更改text的。

<div class="modal fade" id="confirmDelSpell" tabindex="-1" role="dialog" aria-labelledby="delSpellInfo" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×button>
                    <h5 class="modal-title" id="delSpellInfo">提示h5>
                div>
                <div class="modal-body" id="confirmDelSpellBodyContent">确认删除此咒语?<br>div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消button>
                    <button type="button" id="btnConfirmDelSpell" class="btn btn-primary" data-dismiss="modal">确定button>
                div>
            div>
        div>
    div>

再看js代码:

$("#confirmDelSpell").on('show.bs.modal', function (event) {
      checkLength = $("input:checkbox[name='ckb']:checked").length;
      if(checkLength == 0) {
           $("#confirmDelSpellBodyContent").text("请至少选择一条数据!");
      } else {
           $("#confirmDelSpellBodyContent").text("确认删除此数据?");
      }
});
$("#btnConfirmDelSpell").click(function () {
   //删除功能的代码逻辑
   if(checkLength == 0) {
      return;
   }
});

而btn按钮要添加几个属性了:

aria-hidden="true" data-toggle="modal" data-target="#confirmDelSpell"
<div class="form-actions form-group button-margin-left">
    <button type="button" id="btnDelSpell" class="btn btn-primary btn-sm" aria-hidden="true" data-toggle="modal" data-target="#confirmDelSpell">删除button>
    div>

这样再到后台那边调试就ok了。

你可能感兴趣的:(前端学学)