除了所选的 ng-repeat 项目外，如何降低屏幕上其他所有内容的不透明度？

Question

我在 Whosebug 上到处查看，似乎没有其他人解决这个问题，或者我只是使用了错误的措辞或关键字导致我找不到我想要的东西。如果是这种情况并且这是重复的，如果你能 link 我会很高兴这样的情况。谢谢。

我有一个 HTML/CSS、AngularJS、PHP 和 MySQL 项目。
POST 和 GET 请求完美运行。
我正在尝试做的事情与 Google Keep 上已经完成的事情类似。
当用户单击蓝色铅笔时，我希望所选项目的不透明度为 100%，但所有父 div 和兄弟 div 的不透明度值为 0.3 或其他值。

我想尝试 尽可能避免 jQuery。
我相信我在某处读到说一起使用一大堆框架是不好的做法，当你使用一个框架时，你应该坚持使用它。

我不知道如何解决这个问题。
我什至不知道从哪里开始。

能否请您也给我提供一个工作示例 JSFiddle 或 Plnkr？

如有任何帮助或建议，我们将不胜感激！
提前致谢！

我想要的

我有什么

HTML

<body ng-app="myApp">
  <font face="Source Sans Pro">

    <div class="left">
      <center>
        <div ng-controller="insertController">
          <h2> What I learned today </h2>
          <form>
            Date <br>
            <input type="text" ng-model="date"><br><br>
            Content <br>
            <textarea rows="10" cols="50" ng-model="content"></textarea><br><br>
            <input type="button" value="Submit" ng-click="insertdata()">
          </form>
        </div>
      </center>
    </div>

    <div class="right">
      <center>
        <div ng-controller="fetchController"><br>
          <span ng-repeat="item in results">
            <div class="card">
              <div class="theText">
                <span class="bold-underline">{{item.date}}</span><br>
                {{item.content}}
              </div>
              <div ng-controller="deleteController">
                <input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
              </div>
              <div ng-controller="editController">
                <input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
              </div>
            </div>
            <br><br>
          </span>
        </div>
      </center>
    </div>
  </font>
</body>

编辑
我刚开始工作。

新HTML

<div class="right">
  <center>
    <div ng-controller="fetchController"><br>
      <span ng-repeat="item in results">
          <div ng-controller="fadeController">
            <div class="card" ng-class="cardFade">
              <div class="theText">
                <span class="bold-underline">{{item.date}}</span><br>
                {{item.content}}
              </div><!-- theText -->
              <div ng-controller="deleteController">
                <input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
              </div><!-- deleteController -->
              <div ng-controller="editController">
                <input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
              </div><!-- editController -->
            </div><!-- card -->
          </div><!-- fadeController -->
        <br>
      </span><!-- ng-repeat -->
      <div class="overlay"></div>
    </div><!-- fetchController -->
  </center>
</div><!-- right -->

新CSS

.someCSS {
  background-color: white;
  z-index: 200;
  opacity: 1;
}

.noCSS {
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: black;
  opacity: 0.6;
  z-index: 100;
  pointer-events: none; /* required to be able to click buttons under overlay */
}

fadeController.js

app.controller("fadeController", function($scope, $http, resultsService) {
  $scope.cardFade = "noCSS";
  $scope.editThisItem = function(item) {
    if($scope.cardFade === "noCSS") {
      $scope.cardFade = "someCSS";
    }
    else if($scope.cardFade === "someCSS") {
      $scope.cardFade = "noCSS";
    }
    else {
      alert("FATAL ERROR!");
    }
  };
});

Answer 1

您可以添加 div 作为叠加层

<div class="overlay"></div>

.overlay {
    backgound-color: gray;
    opacity: 0.5;
    z-index: 100; //<= so the overlay with cover the page
}

接下来您需要像这样添加一个 css class

.someCss {
    z-index: 101; // <=so it would be on top on the overlay
}

当您点击蓝色铅笔时，它将添加到 ng-repeat 元素。

我什至会把 class 变成 ng-class ng-class

所以它会是这样的：

  <span ng-repeat="item in results">
    <div class="card" ng-class="{someCss : item.selected}">
      <div class="theText">
        <span class="bold-underline">{{item.date}}</span><br>
        {{item.content}}
      </div>
      <div ng-controller="deleteController">
        <input type="button" class="deleteButton" ng-click="deleteThisItem(item)" value="x">
      </div>
      <div ng-controller="editController">
        <input type="button" class="editButton" ng-click="editThisItem(item)" value="✎">
      </div>
    </div>
    <br><br>
  </span>

现在在蓝色铅笔上单击您可以添加属性 selected 或更改它

除了所选的 ng-repeat 项目外，如何降低屏幕上其他所有内容的不透明度？

How to lower opacity on everything else on screen except the selected ng-repeat item?

html

javascript

css

opacity

angularjs-ng-repeat