【bootstrap modal】记一次模态框无法弹出问题排查过

0x01 问题描述

通过angularjs的$modal服务弹出模态框

$scope.addMark = function () {
        var modal_add = $modal.open({
            templateUrl : 'addmarks.html',
            controller  : 'addmarksController',
            windowClass : 'omais-inform-modal-window',
            size:'sm',
            resolve     : {
                cs : function () {
                    return {};
                }
            }
        });

        modal_add.result.then(function(selectedItem) {
            console.log("1111111111");
        }, function() {
            console.log("2222222222");
        });
    };

触发addMark()函数后，看不见模态框只能看见灰色的背景。

0x02 排查过程

于是查看样式，发现display:none，改成display:block后，能看到modal框，但是样式是变形的。
最后在网上找了一个modal demo，仔细对比最后才发现，是ui-bootstrap-tpls.js的版本不对，
我使用的是<script src="https://cdn.bootcss.com/angular-ui-bootstrap/0.7.0/ui-bootstrap-tpls.min.js"></script>，
别人使用的是<script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>

欢迎关注微信公众号（coder0x00）或扫描下方二维码关注，我们将持续搜寻程序员必备基础技能包提供给大家。