創建圖層

我正在使用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

回答

相關問題