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了。