Question

...用于镀铬扩展我有几个弹出窗口，我想点击顶部的

这就是我做的事情

document.addEventListener("mousedown", function test(evt) {
    evt = evt || window.event;
    if (evt.target.className == 'popup') {
        //evt.target.style.backgroundColor = "blue";  **** successful test
        zIndex++;
        evt.target.style.zIndex = zIndex;
        evt.target.innerHTML = zIndex;
        console.log(evt.target.style.zIndex);
    }


});

每次点击（在弹出类上）都有一个计数器将z-index提高1，将其保存到变量zIndex，然后通过

将该变量应用于被点击的元素

evt.target.style.zIndex = zIndex;

计数器工作，innerHTML设置为显示z-index（evt.target.innerHTML = zIndex;）并且控制台显示点击元素的z-index（弹出窗口）

但....弹出窗口没有出现在前面

我错过了什么？

TNX

Answer 1

z-index相对于屏幕上的其他对象。

如果为元素增加z-index，则需要相对减少底部元素

Answer 2

您应该创建2个CSS类，一个名为focus，另一个名为unfocus。单击元素时，应交换该类。当前单击的元素将获得具有高静态z-index的焦点类。最后点击的元素，聚焦后将与低静态z-index交换回不聚焦。我会尽快发布一些代码，但这是你应该使用的方法，而不是逐步增加zIndex。

这是一个基本示例，只需用您的z-index设置替换我的颜色背景。

<html><head><title></title>
<style>
  .first{
    background:silver;
    padding:20px;
    color:#ffffff;
    z-index:9000;
  }
  .second{
    background:yellow;
    padding:30px;
    color:#000000;
    z-index:9001;
  }
</style>
<script type="text/javascript">
  var y;  // create a variable to save the last focused element.
  function changeClass(x) {
    if (y) {
        y.className="first"; // sets last focused element to original style
    }
    x.className="second";  // sets current focused element to new style
    y = x;  // sets current element as y (the basis of a toggle)
  }
</script>
</head>
<body>
    <div id="div1" class="first" style="width: 200px;" onclick="changeClass(this);">Click me and I will change!</div>
    <div id="div2" class="first" style="width: 200px;" onclick="changeClass(this);">Click me and I will change too!</div>
</body>
</html>

这是一个小提琴：http://jsfiddle.net/v55z7/

JS-zIndex：无法动态更改元素的z-index

2 个答案: