创建图层
我正在使用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。但是，我无法让它与页脚一起工作。另外，还有比我想要的更多的铬。
有谁知道如何做到这一点？
谢谢！
您可以使用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';
};
});
希望帮助。
感谢您的分享。我喜欢你的解决方案。但是，我有一个问题。屏幕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 00:33:27
让我明白：当用户单击页脚中的一个按钮时，相应的内容应该出现在div.container标识的区域中。 – whyceewhite 2014-09-06 01:11:43