个人中心
gpt4 book ai didi

angularjs - Bootstrap UI : How to change background color of popover

转载 作者：行者123 更新时间：2023-12-04 15:33:02 25 4
gpt4 key购买 nike

我正在尝试更改 Bootstrap UI popover 的背景颜色通过创建自定义弹出类来覆盖现有的类(例如 popover1 、 popover2 等，而不是 popover )。我知道这适用于 Vanilla Bootstrap 弹出框(这里是 fiddle ，但它似乎不适用于 Bootstrap UI 弹出框)。

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

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

日志级别模板.html 
<div class="popover1">
    <div class="arrow"></div>
    <div class="popover-content">
       <p>some content</p>
    </div>
</div>

当我删除 popover1它可以工作的类，因此仅显示弹出框就没有功能问题。

我更喜欢使用 Bootstrap UI 弹出框，因为您不必在 jQuery 中使用任何硬编码模板 tomfoolery(实际上您根本不必编写任何 jQuery)。我只是不知道如何更改 Bootstrap UI 弹出框的背景颜色。在我进入兔子洞之前，我想知道是否有其他人已经实现了这一点，或者是否有一个简单的修复方法(也许 Bootstrap UI 弹出框使用的类集与普通弹出框不同)。如果这是一个覆盖某些 CSS 类的问题，那将是梦想。

最佳答案

不幸的是，UI Bootstrap 文档中没有记录这一点，我(也很遗憾)花了几个小时才找到这个极其简单的解决方案，但希望这可以为其他人节省一些时间。您可以添加 popover-class属性到放置 uib-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>

关于angularjs - Bootstrap UI : How to change background color of popover，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32015482/

25 4 0
文章推荐： cordova - 为什么使用 Ionic cordovaCapture(Apache Cordova 媒体捕获插件)在 iOS 上录制低分辨率视频 (480x360)？
文章推荐： spring - 可以通过属性文件设置 Spring 事件配置文件吗？
文章推荐： performance - haskell /GHC : Unsafely deconstruct a constructor?
文章推荐： gulp - 如何在 gulpfile.js 中获取 VS15 的当前配置(调试/发布)？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com