ui bootstrap：更改模态标题背景颜色答案

【问题标题】：uibootstrap : change modal header background colorui bootstrap：更改模态标题背景颜色
【发布时间】：2016-04-01 14:20:11
【问题描述】：

我在我的 Angularjs 应用程序中使用 ui 引导程序。
我想通过更改背景颜色来自定义模态标题。
但是，如果我放大模态框的标题，我会发现我可以应用颜色更改的标题不是应有的圆形。
所以最后的结果并不好。

如何以“不错”的方式更改标题背景颜色？

谢谢。

[更新]

onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
                $uibModal.open({
                    templateUrl: 'app/entities/consultant/consultant-dialog.html',
                    controller: 'ConsultantDialogController',
                    controllerAs: 'vm',
                    backdrop: 'static',
                    windowClass: 'consultant-dialog-modal-window',

模态的HTML代码：

<form name="editForm" class="form-horizontal" role="form" novalidate ng-submit="vm.save()" show-validation>

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                ng-click="vm.clear()">&times;</button>
        <h4 class="modal-title" id="myConsultantLabel">modal header</h4>
    </div>
    <div class="modal-body">

【问题讨论】：

能否请您发布实际代码。
使用 uibmodal.open 生成模态，生成代码。见主帖更新

标签： twitter-bootstrap-3 angular-ui-bootstrap

【解决方案1】：

只需将modal-content 上的CSS overflow 属性设置为hidden：

.modal-content {
  overflow: hidden;
}

详见 sn-p。

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $uibModal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

  $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };

});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $uibModal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $uibModalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $uibModalInstance.dismiss('cancel');
  };
});

.modal-content {
  overflow: hidden;
}

.modal-header {
  background: lightblue;
}

<!doctype html>
<html ng-app="ui.bootstrap.demo">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.0.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
      </head>
  <body>

<div ng-controller="ModalDemoCtrl">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li ng-repeat="item in items">
                    <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
                </li>
            </ul>
            Selected: <b>{{ selected.item }}</b>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
            <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button type="button" class="btn btn-default" ng-click="open()">Open me!</button>
    <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
    <button type="button" class="btn btn-default" ng-click="open('sm')">Small modal</button>
    <button type="button" class="btn btn-default" ng-click="toggleAnimation()">Toggle Animation ({{ animationsEnabled }})</button>
    <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
  </body>
</html>

【讨论】：

【解决方案2】：

如果您的构建过程允许您运行less，那么我就是这样解决它的：

// path to your bootstrap source
@import (reference) "../../../bower_components/bootstrap/less/mixins.less";
// remove the background color from the container
.modal-default .modal-content,
.modal-primary .modal-content,
.modal-success .modal-content,
.modal-info .modal-content,
.modal-warning .modal-content,
.modal-danger .modal-content {
  background-color: transparent;
}

// apply the border radius to the top and bottom
.modal-default .modal-header,
.modal-primary .modal-header,
.modal-success .modal-header,
.modal-info .modal-header,
.modal-warning .modal-header,
.modal-danger .modal-header  {
  .border-top-radius(@border-radius-large);
}
.modal-default .modal-footer,
.modal-primary .modal-footer,
.modal-success .modal-footer,
.modal-info .modal-footer,
.modal-warning .modal-footer,
.modal-danger .modal-footer {
  .border-bottom-radius(@border-radius-large);
}
.modal-default .modal-body,
.modal-primary .modal-body,
.modal-success .modal-body,
.modal-info .modal-body,
.modal-warning .modal-body,
.modal-danger .modal-body {
  background-color: @modal-content-bg;
}

.modal-variant(@color; @background; @border) {
  .modal-header  {
    color: @color;
    background-color: @background;
    border-color: @border;
  }
  .modal-footer  {
    color: @color;
    background-color: @background;
    border-color: @border;
  }
}

// build modals based on button defaults
.modal-default {
  .modal-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
.modal-primary {
  .modal-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
}
// Success appears as green
.modal-success {
  .modal-variant(@btn-success-color; @btn-success-bg; @btn-success-border);
}
// Info appears as blue-green
.modal-info {
  .modal-variant(@btn-info-color; @btn-info-bg; @btn-info-border);
}
// Warning appears as orange
.modal-warning {
  .modal-variant(@btn-warning-color; @btn-warning-bg; @btn-warning-border);
}
// Danger and error appear as red
.modal-danger {
  .modal-variant(@btn-danger-color; @btn-danger-bg; @btn-danger-border);
}

（我相信我也是@importing 基础bootstrap.less 文件）

然后，您可以使用通常的$uibModal.open(...)，或者添加一个属性，例如windowClass: 'modal-danger'。这会将类添加到底层容器并级联更改而不改变“正常”模式的样式。

这将使用标准引导按钮颜色为 modal-header 和 modal-footer 着色。如果您想让页脚保持白色，您可以在变体方法中删除页脚声明（并复制 modal-body 块）。

【讨论】：