Question

我在Angularjs应用程序中使用ui bootstrap 我想通过更改背景颜色来自定义模态标题但是，如果我放大模态的标题，我看到我可以应用颜色变化的标题不是应该的圆形。
所以最终结果并不好。

如何在＆＃34; nice＆＃34;中更改标题背景颜色？方式是什么？

谢谢。

[UPDATE]

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">

Answer 1

只需将modal-content上的CSS hidden属性设置为.modal-content { overflow: hidden; }：

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');
  };
});

有关详细信息，请参阅代码段。

＆＃13;

.modal-content {
  overflow: hidden;
}

.modal-header {
  background: lightblue;
}

＆＃13;

<!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>

＆＃13;

LENGTH_INDEFINITE

＆＃13;

Answer 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);
}

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

然后，您可以使用常规$uibModal.open(...)，或添加windowClass: 'modal-danger'等属性。这会将类添加到底层容器中并级联更改，而不会改变＆＃34; normal＆＃34;模态是风格的。

这将使用标准引导按钮颜色为模态标题和模态页脚着色。如果您希望页脚保持白色，可以在变体方法中删除页脚声明（并复制模态体块）。

uibootstrap：更改模态标题背景颜色

2 个答案: