Javascript AngularJs在模式中注入模板html

我必须模拟slider的功能，它有一些控件，如next/prev按钮和切换全屏按钮。在toogle全屏上，我必须在拉伸模式下显示滑块，我使用z索引完成了此操作，但它不起作用，因为滑块的父项的z索引低于其同级。您可以在这里看到实现

第{{currentPageNo}页的内容
下一页
切换全屏

• 一种可能的解决方案是更改滑块父对象及其子对象的z索引 兄弟姐妹使用javascript
• 另一个可能的解决方案是预先设置一个 在主体中div容器，并在该容器中注入滑块html。但我 我不知道我怎么才能做到这一点

---

您需要更好地调整

z-index

css属性。问题是，全屏元素的

z-index

相对于其父元素，其父元素的

z-index

值低于同级元素，因此这就是问题所在。检查下面的代码段：

var-app=angular.module（'myApp'，[]）；
//指令（'myDirective'，function（）{}）；
//工厂（'myService'，function（）{}）；
应用程序控制器（'MyCtrl'，函数（$scope）{
$scope.currentPageNo=1；
$scope.nextPage=函数（）{
$scope.currentPageNo++；
}
})

。全屏{
位置：固定；
排名：0；
左：0；
宽度：100%；
身高：100%；
z指数：3/*
父内容

父内容


第{{currentPageNo}页的内容
下一页
切换全屏
父内容

感谢您的回复，但我正在一个网站上工作，该网站已经创建并更改了其他html元素的z索引（除了slider元素这一新功能）导致其他不同位置的ui损坏。因此，我最多只能在全屏模式下更改zindex，在正常模式下还原zindez中的更改。@DurGeshkuMarRAO是的，这是您可以确定的，但您需要将旧值存储在某个位置，以便再次引用它以还原。尽管您可以重写更好。你能分享你的想法吗，如何存储旧值，因为我必须处理页眉、页脚、滑块、顶部导航栏和更多。此外，滑块模板将显示在不同的页面上，如主页、单个活动页面、组页等。是否有使用jquery/javascript解决此问题的通用方法。

<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>