【问题标题】:Conditional modal backdrop in angular角度条件模态背景
【发布时间】:2017-03-01 11:19:36
【问题描述】:

我正在尝试以角度实现模态背景效果。我希望在显示完全覆盖背景屏幕的某个模态对话框时出现纯色 - 但我不希望所有模态都出现这种行为(对于其他我不想要背景的人)。

我在顶级样式表中添加了一些 CSS,如下所示:

.modal-backdrop {
background-color: #008000;
opacity: 1.0 !important;
}

它的工作原理是它绘制了一个纯绿色背景,但它发生在我系统上的所有模式上——我只需要它发生在一种类型上。我意识到“!important”指令可防止任何 CSS 覆盖,但不提供此功能会导致背景页面未完全隐藏(可以通过绿色看到)。

关于如何做到这一点的任何想法?

【问题讨论】:

    标签: css angularjs twitter-bootstrap bootstrap-modal


    【解决方案1】:

    您可以使用uib-modalbackdropClass 选项

    $uibModal.open({
      ...other options
      backdropClass: 'green-backdrop'
    })
    

    然后在你的css中

    .green-backdrop.modal-backdrop {
      background-color: #008000;
      opacity: 1.0 !important;
    }
    

    angular.module('test', ['ui.bootstrap']).controller('Test', Test);
    
    function Test($scope, $uibModal) {
      $scope.normal = function() {
        $uibModal.open({
          template: "<div>Hi, I'm normal modal</div>"
        });
      }
      
      $scope.green = function() {
        $uibModal.open({
          template: "<div>Hi, I'm green modal</div>",
          backdropClass: "green-backdrop"
        });
      }
    }
    .green-backdrop.modal-backdrop {
      background-color: #008000;
      opacity: 1.0 !important;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
    
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    
    <div ng-app="test" ng-controller="Test">
      <button type="button" ng-click="normal()">normal</button>
      <button type="button" ng-click="green()">green</button>
    </div>

    【讨论】:

    • 谢谢 - ">" CSS 运算符是什么?
    • &gt; 表示只匹配下面的 1 层。 w3schools.com/cssref/sel_element_gt.asp
    • 我尝试了这个建议,但没有应用新定义 (.green-backdrop-modal),尽管按照建议在 modal.open 调用的 windowClass 属性中引用了它 - 有什么想法吗?相比之下,如果我在我的自定义 CSS 中定义 .modal-backdrop ,那么它会被观察到,但当然会被应用于系统中的所有模式。
    • @bzo 更新了答案。原来有一个名为backdropClass 的选项更适合此目的。如果您将自己的 css 放在 bootstrap 的 css 下面,那么只有 .green-backdrop 而不是 .green-backdrop.modal-backdrop 也可以完成这项工作。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-10-01
    • 1970-01-01
    • 1970-01-01
    • 2021-09-15
    • 1970-01-01
    • 2021-12-21
    相关资源
    最近更新 更多