角度付きの条件付きモーダルバックグラウンド

Question

私は、角度付きモーダルバックグラウンドエフェクトを実装しようとしています。バックグラウンド画面を完全にオーバーレイする特定のモーダルダイアログが表示されているときにソリッドカラーを表示したいのですが、私はすべてのモーダルでこの動作を望んでいません。

次のように私は、トップレベルのスタイルシートにいくつかのCSSを追加しました：

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

これは、緑色の背景を塗るが、それは私のシステム上のすべてのモーダルのために起こることで動作します - 私はそれが起こる必要があります1つのタイプのみ。私は "！important"指示文がCSSのオーバーライドを防ぎますが、バックグラウンドページを完全に非表示にすることはできません（これは緑の色で見ることができます）。

どのようにこれを行うことができますか？

Answer 1

あなたの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>