javascript - 如何更改 JavaScript 上的 z 索引？

Question

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

#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");

这是可行的，因为您可以链接函数，因为所有内容都会返回已更改的元素。