AngularJS - $uibModal - 自定义模态框大小

文档参考

Modal(ui.bootstrap.modal)的使用：https://www.jianshu.com/p/2cbf835509b1

自定义模态框大小

• controller中添加 windowClass:‘modal-class’ 用来增加额外样式，增加 size: ‘lg’ 用来设置默认模态框为大尺寸。

function showModal(type, data) {
            var modalInstance = $modal.open({
                templateUrl: modalConfig[type].templateUrl,
                controller: 'ShowPicController',
                controllerAs: 'vm',
                windowClass:'modal-class',
                size:'lg',
                resolve: {
                    modalConfig: function () {
                        return modalConfig[type];
                    },
                    picUrl: function () {
                        return data;
                    }
                },
                backdrop: 'static'
            });
            modalInstance.result.then(function (data) {
                // modalConfig[type].action(user);
            });
        }

• css中定义modal-class，并覆盖modal-lg的样式。其中width为在页面为小尺寸时起作用，max-width为固定最大宽度。

.modal-class{
    .modal-lg{
        width: 80%;  
        max-width: 1024px;
    }
}

• html模板

<script type="text/ng-template" id="/show_pic">
    <div class="modal-header">
        <h4>{{vm.modalConfig.title}}</h4>
    </div>
    <div class="modal-body">
        <img ng-src="{{vm.picUrl}}"/>
    </div>
    <div class="modal-footer text-right">
        <button class="btn btn-primary" ng-click="$dismiss()">
            <i class="btn-icon glyphicon glyphicon-remove"></i>
            <span translate="COMMON_CANCEL"></span>
        </button>
    </div>
</script>

• 浏览器解析后html，可以看到添加的modal-class样式

<div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope modal-class in" uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}" uib-modal-window="modal-window" window-class="modal-class" size="lg" index="0" animate="animate" modal-animation="true" style="z-index: 1050; display: block;">
    <div class="modal-dialog modal-lg"><div class="modal-content" uib-modal-transclude="">
    <div class="modal-header ng-scope">
        <h4 class="ng-binding">查看大图</h4>
    </div>
    <div class="modal-body ng-scope">
        <img ng-src="http://localhost:7000/upload/image1111.png" src="http://localhost:7000/upload/image1111.png">
    </div>
    <div class="modal-footer text-right ng-scope">
        <button class="btn btn-primary" ng-click="$dismiss()">
            <i class="btn-icon glyphicon glyphicon-remove"></i>
            <span translate="COMMON_CANCEL" class="ng-scope">取消</span>
        </button>
    </div>
</div></div>
</div>