创建图层

我正在使用AngularJS和Bootstrap的应用程序。我的应用程序的基本结构是这样的：创建图层

home.html的

<body ng-controller="MyController"> 
    <div class="container"> 
    The main content goes here 
    </div> 

    <div class="footer"> 
    <div class="container"> 
     <button class="btn btn-info" ng-click="showScreenA()"><span class="glyphicon glyphicon-font"></span></button> 
     <button class="btn btn-info" ng-click="showScreenB()"><span class="glyphicon glyphicon-bold"></span></button>  
    </div> 
    </div> 
</body>

home.js

myApp.controller('MyController', [function($scope) { 
    $scope.showScreenA = function() { 
    // Display screen A whether screen B is open or if the main content is shown. 
    // No difference. 
    }; 

    $scope.showScreenB = function() { 
    // Display screen B whether screen A is open or if the main content is shown. 
    // No difference. 
    }; 
}]);

理想情况下，我想一个div从动画顶部与屏幕A或屏幕B.该div无法以任何方式覆盖页脚。我想过几个选项。但是，我无法弄清楚这么做的好方法。起初，我想过使用Bootstrap Modal。但是，我无法让它与页脚一起工作。另外，还有比我想要的更多的铬。

有谁知道如何做到这一点？

谢谢！

来源

2014-09-06 user3284007

向我们展示如何试图展示模态。 – 2014-09-06 00:33:27

让我明白：当用户单击页脚中的一个按钮时，相应的内容应该出现在div.container标识的区域中。 – whyceewhite 2014-09-06 01:11:43

您可以使用ng-show和动画ngAnimate来控制能见度。

我做了一个plunkr一个简单的例子： http://plnkr.co/edit/4GcqBpOB5lBiGVv3YhK5?p=preview

请务必角animate.js添加到您的网页，并在应用中注入ngAnimate：

var app = angular.module('plunker', ['ngAnimate']); 

app.controller('MainCtrl', function($scope) { 
    $scope.showScreenA = function() { 
    $scope.screen = 'A'; 
    }; 

    $scope.showScreenB = function() { 
    $scope.screen = 'B'; 
    }; 
});

希望帮助。

来源

2014-09-06 01:10:15 Fedaykin

感谢您的分享。我喜欢你的解决方案。但是，我有一个问题。屏幕A和屏幕B总是出现在主要内容的顶部？您的解决方案正确覆盖了主要内容。在我的解决方案中，屏幕出现。但是，主要内容位于屏幕上方。我认为这是屏幕之后HTML的主要内容。但是，您的解决方案按照我想要的方式工作。然而，我不明白为什么。 – user3284007 2014-09-06 19:09:06

不错，这个行为是用css完成的，请看CSS文件，'.screen'类，'position：absolute'这个技巧。请标记为答案，如果是这种情况，谢谢。 – Fedaykin 2014-09-06 19:29:36

我不完全确定你想用你的页面做什么。我建议不要编写两个单独的函数，但最好使用单个函数并将（A或B）作为参数传递，然后编写条件语句。

ng-click="showScreen(a) & ng-click="showScreen(b) 


$scope.showScreen = function(item){ 
    if(item === a){} else if (item === b){}; 
}

我设置的z-index页脚到一个较高的值，并设置要从功能似乎有在CSS较低的z-index股利，而无需在控制器代码更改它。

来源

2014-09-06 01:12:54 kirdua

回答

相关问题