angularjs – Bootstrap UI：如何更改popover的背景颜色

发布时间：2020-12-17 06:54:04 所属栏目：安全来源：网络整理

导读：我试图通过创建自定义popover类来覆盖现有的类型来改变 Bootstrap UI popover的背景颜色(例如popover1,popover2等,而不是popover).我知道这适用于vanilla Bootstrap popovers(这是 fiddle,但它似乎不适用于Bootstrap UI popovers). 当我将相同的方法应用于Bo

我试图通过创建自定义popover类来覆盖现有的类型来改变 Bootstrap UI popover的背景颜色(例如popover1,popover2等,而不是popover).我知道这适用于vanilla Bootstrap popovers(这是 fiddle,但它似乎不适用于Bootstrap UI popovers).

当我将相同的方法应用于Bootstrap UI popover时,它只显示一个很小的空白弹出窗口.到目前为止,我所做的就是改变

<a class="btn btn-primary popover-container" id="popover" data-toggle="popover" data-placement="right" data-container="body" rel="log-popover">Log level</a>

至

<a class="btn btn-primary popover-container" popover-placement="right" popover-template="'partials/loglevel-template.html'" popover-trigger="click">Log level</a>

日志等级,template.html

<div class="popover1">
    <div class="arrow"></div>
    <div class="popover-content">
       <p>some content</p>
    </div>
</div>

当我删除它运行的popover1类时,所以没有功能问题只是让弹出窗口显示.

我更喜欢使用Bootstrap UI popovers,因为你不必在jQuery中使用任何硬编码模板tomfoolery(事实上你根本不需要编写任何jQuery).我只是无法弄清楚如何更改Bootstrap UI popovers的背景颜色.在我走下兔洞之前,我想知道是否有其他人已经实现了这一点,或者是否有一个简单的修复(也许Bootstrap UI popovers使用一组不同于vanilla popovers的类).如果这是一个覆盖一些CSS类的问题,那将是梦想.

解决方法

遗憾的是,在UI Bootstrap文档中没有记录这一点,我(也不幸的是)我花了几个小时来找到这个非常简单的解决方案,但希望这会节省一些其他人的时间.您可以将popover-class属性添加到放置uib-popover指令的元素,然后相应地设置popover的样式.有关详情,请参阅下面的代码段：

angular.module('ui.bootstrap.demo',['ngAnimate','ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl',function ($scope,$sce) {
  
  $scope.dynamicPopover = {
    content: 'Hello,World!',templateUrl: 'myPopoverTemplate.html',title: 'Title'
  };

});

.trigger-popover-button {
  margin: 25% 0 0 10%;
}

.custom-dynamic-popover-class {
  color: red;
}

.custom-dynamic-popover-class > .popover-inner > .popover-title {
  background: yellow;
}

.custom-dynamic-popover-class > .popover-inner > .popover-content {
  background: blue;
}

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

    <div ng-controller="PopoverDemoCtrl">
    
      <button uib-popover-template="dynamicPopover.templateUrl" 
              popover-title="{{dynamicPopover.title}}" 
              popover-class="custom-dynamic-popover-class"
              type="button" 
              class="btn btn-default trigger-popover-button">
        Popover With Template
      </button>

      <script type="text/ng-template" id="myPopoverTemplate.html">
        <div>{{dynamicPopover.content}}</div>
        <div class="form-group">
          <label>Popup Title:</label>
          <input type="text" 
                 ng-model="dynamicPopover.title" 
                 class="form-control">
        </div>
      </script>
   
    </div>
  </body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!