使用 angular-modal-service (AngularJS) 自定义模态答案

【问题标题】：Customizing Modals with angular-modal-service (AngularJS)使用 angular-modal-service (AngularJS) 自定义模态
【发布时间】：2016-08-08 16:40:06
【问题描述】：

我正在使用 (angular-modal-service) 通过服务创建弹出窗口和模式，但我想知道如何自定义它们？例如，如何更改modal-header 颜色或删除页眉、正文和页脚之间的“默认”行？谢谢。

控制器示例：

var app = angular.module('app', ['angularModalService']);

app.controller('Controller', function($scope, ModalService) {

$scope.show = function() {
    ModalService.showModal({
        templateUrl: 'modal.html',
        controller: "ModalController"
    }).then(function(modal) {
        modal.element.modal();
        modal.close.then(function(result) {
            $scope.message = "You said " + result;
        });
    });
 };

});

app.controller('ModalController', function($scope, close) {

$scope.close = function(result) {
   close(result, 500); // close, but give 500ms for bootstrap to animate
};

});

html 示例：

<script src="https://code.angularjs.org/1.4.9/angular.min.js"></script>
<script src="https://rawgit.com/dwmkerr/angular-modal-service/master/dst/angular-modal-service.js"></script>

<div class="container" ng-app="app" ng-controller="Controller">

    <h3>Angular Modal Service</h3>
     <a class="btn btn-default" href ng-click="show()">Show a Modal</a>
     <p>{{message}}</p>

     <!-- The actual modal template, just a bit o bootstrap -->
     <script type="text/ng-template" id="modal.html">
         <div class="modal fade">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" ng-click="close('Cancel')" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Yes or No?</h4>
              </div>
              <div class="modal-body">
                <p>It's your call...</p>
              </div>
              <div class="modal-footer">
                <button type="button" ng-click="close('No')" class="btn btn-default" data-dismiss="modal">No</button>
                <button type="button" ng-click="close('Yes')" class="btn btn-primary" data-dismiss="modal">Yes</button>
              </div>
            </div>
          </div>
        </div>
     </script>

</div>

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

您的问题是 CSS 问题。

要更改模态颜色或边框，您必须添加自定义 CSS。

您可以使用 google 开发工具来更改样式并实时查看结果，因此您不必重新加载页面。

更改标题颜色：

.modal-header {
    background-color: red;
}

在页脚中隐藏边框：

.modal-footer {
    border-top: 0px!important;
}

【讨论】：

绝对比我想象的要简单。谢谢！

【解决方案2】：

您可以使用 css 否则将其转换为自定义指令

【讨论】：