AngularJs Injecting template html in a modal

Question

I have to simulate a functionality of slider , it has some controls like next / prev button and a toggle fullscreen button . On toogle fullscreen , I have to show the slider in stretched mode , I have done this using z-index but it is not working, since parent of slider has lower z-index than that of its siblings . you can see implementation here

http://jsfiddle.net/HB7LU/22326/

<div id="slide"  ng-class ='{fullscreen:isFullScreen}'   
     style="background : #FFEB3B;padding: 20px; margin:10px;" >
  content of page {{currentPageNo}}
    <div class="control">
        <button ng-click="nextPage();">Next Page</button>
        <button ng-click="isFullScreen = !isFullScreen;">Toggle Full Screen</button>
    </div>
</div>

• One possible solution is to change z-index of slider parent and its sibling using javascript.
• Other possible solution is to prepend a div container in body and inject slider html in that container. But I don't know how I can do this in angular

Answer 1

You need to adjust the z-index css property better. Issue was the z-index of the fullscreen element is relative to its parent and its parent has the lower value of z-index from the sibling one so that was the issue. Check the snippet below:

 var app = angular.module('myApp', []); //myApp.directive('myDirective', function() {}); //myApp.factory('myService', function() {}); app.controller('MyCtrl', function($scope) { $scope.currentPageNo = 1; $scope.nextPage = function() { $scope.currentPageNo++; } }) 

 .fullscreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 3; /*<------has the highest property*/ } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='myApp' ng-controller="MyCtrl"> <div style="background : #f00; margin:10px; position:relative; z-index : 1"> <!----------------------------------------------check above--^^^^^^^^^^^--> Parent sibling Content <br/>Parent sibling Content <br/> </div> <div style="background : #4CAF50;margin:10px; position:relative; z-index :2"> <!-----------------------------------------------check above--^^^^^^^^^^^--> Parent Content <br/>Parent Content <br/> <div id="slide" ng-class='{fullscreen:isFullScreen}' style="background : #FFEB3B;padding: 20px; margin:10px;"> content of page {{currentPageNo}} <div class="control"> <button ng-click="nextPage();">Next Page</button> <button ng-click="isFullScreen = !isFullScreen;">Toggle Full Screen</button> </div> </div> Parent Content <br/> </div> </div>