css - 如何获得 $ionic Backdrop 之上的元素?

标签 css ionic-framework

这似乎是一个非常 z-index 的问题,但我无法找到解决方案。 我正在尝试让 ion-view 中的元素出现在 $ionicBackdrop 之上。

示例笔:http://codepen.io/ankitjain11/pen/grwZav

JS:

angular.module('myApp', ['ionic'])

  .controller('IonicBackdropCtrl', function($scope, $ionicBackdrop, $timeout) {

  $scope.show = function() {
    $scope.back = true;
    $ionicBackdrop.retain();
  };
  $scope.hide = function () {
        $scope.back = false;
    $ionicBackdrop.release();
  }

});

HTML:

  <body ng-controller="IonicBackdropCtrl">
    <ion-view>
      <ion-content>
        <button class="button" ng-click="show()">
          Show Backdrop
        </button>
        <button class="button" ng-click="hide()" ng-show="back">
          Hide Backdrop
        </button>
      </ion-content>
    </ion-view>
  </body>

此处,Hide Backdrop 按钮将覆盖背景。曾经,背景是可见的。

尽管我的实现不像 Pen 那样直接,但仍然可以达到我的目的。

最佳答案

Here is关于同一问题的讨论。并且如本讨论中所述,有您想要的解决方法。让按钮成为 body 的直接子元素,然后 z-index 更改就可以了。看这里http://codepen.io/anon/pen/EKNvrZ

关于css - 如何获得 $ionic Backdrop 之上的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35989197/

相关文章:

javascript - Conway 生命游戏 - 细胞不会出现在 Canvas 上

javascript - 包含文件夹中图像的幻灯片

javascript - 使用 CSS3 结束关键帧动画

javascript - 我希望我的标题和导航栏位于相同的 border-bottom

angular - 如何在 ngx-pinch-zoom 中用两根手指启用缩放

windows - ionic 2 启动失败,生成的命令出错

css - 在 Ionic 中设置特定于平台的图标

javascript - 如何从组件到达 $rootScope?

reactjs - react ionic 5 : How to pass object from App component to Tab component

jquery - 如何实现平滑滚动以将内容带到视口(viewport)的中间而不是顶部?