javascript - CSS/JavaScript : Make element top-most z-index/top-most modal element

Question

我想让一个元素(例如 <div>)成为页面的最顶层。

我的假设是我能做到这一点的唯一方法是指定该元素具有 style="z-index:"浏览器允许的最大值(int32？)。

这是正确的吗？

相反，是否有可能以某种方式获取元素的 z-index谁是最高的，并使这个<div>的 z-index [highest element's value] + 1 ？例如:

$myDiv.css("z-index", $(document.body).highestZIndex() + 1);

模态 JavaScript“窗口”如何工作？

Answer 1

方法如下:

var elements = document.getElementsByTagName("*");
var highest_index = 0;

for (var i = 0; i < elements.length - 1; i++) {
    if (parseInt(elements[i].style.zIndex) > highest_index) {
        highest_index = parseInt(elements[i].style.zIndex;
    }
}

highest_index 现在包含页面上最高的 z-index...只需将该值加 1 并将其应用到您想要的任何位置。你可以像这样应用它:

your_element.style.zIndex = highest_index + 1;

这是使用 jQuery 实现相同目的的另一种方法:

var highest_index = 0;

$("[z-index]").each(function() {
    if ($(this).attr("z-index") > highest_index) {
         highest_index = $(this).attr("z-index");
    }
});

同样，将新索引应用于元素的方法相同:

$("your_element").attr("z-index", highest_index + 1);