Question

我到处搜索但无法找到答案。好吧，所以 - 我用onclick事件做了一个popup有点事情，它在我的帖子包装上 - 但因为它在顶部，我无法向下滚动，这就是为什么我改变了z -指数。我可以再次滚动，但是当我点击链接时，弹出窗口出现在我的帖子包装器后面，无论我做什么并将z-index更改为，它都会保留在包装器后面或位于顶部并使其无法滚动。我希望弹出窗口在未单击时具有比我的包装器更低的z-index，并且在单击时具有更高的z-index。我该怎么做呢？我从我的朋友那里得到了代码 - 所以..是的，你走了！

#wrapper{
   {block:IndexPage}
   width:270px;
   {/block:IndexPage}
   {block:PermalinkPage}
   width:270px;
   {/block:PermalinkPage}
   margin-top:100px;
   margin-right: 250px;
   margin-left: auto;
   height: 400px;
   overflow:scroll;
   overflow-x:hidden;
   background-color: transparent;
   background-repeat: repeat;
   margin-bottom:100px;
   padding:15px;
   border: 3px solid #f3f2f2;
   z-index: 300;

}
#gee {
  position: fixed;
  top:100px;
  width:297px;
  height:490px;
  right: 250px;
  font:10px;
  opacity: 0.0;
  padding: 5px;
  background-color:  #f8f6f6;
  color: #cccbcb;
  z-index:400;
}

Javascript就是这样：

<script language="javascript">
 $(document).ready(function() {
   $('a#clickbutton').click(function() {
      $('.t',this).toggle();
   });

   $("#gee").css({"opacity": "0.0", "z-index": "-10"});
   $("#clickbutton").toggle(
      function () {
         $("#gee").animate({"opacity": "1.0", "z-index": "400"}, "fast");
      },
      function () {
         $("#gee").animate({"opacity": "0.0", "z-index": "-30"}, "fast");
   });
 });
</script>

Answer 1

jQuery animate不适用于z-index。

所以，分开做：

$("#gee").animate({"opacity": "1.0"}, "fast").css("z-index", "400");

和

$("#gee").animate({"opacity": "0.0"}, "fast").css("z-index", "-30");

这是有效的，因为你可以链接函数，因为一切都返回了被更改的元素。

如何在javascript上更改z-index？

1 个答案: