CSS / JavaScript:使元素最顶层的z-index /最顶层的模态元素 [英] CSS/JavaScript: Make element top-most z-index/top-most modal element
问题描述
我想让一个元素(例如< div>
)成为页面上最顶层的。
I would like to make an element (e.g. a <div>
) be the top-most layer on the page.
我的假设是,我能做到这一点的唯一方法是指定元素具有 style =z-index:
值,即浏览器允许的最大值(int32?)。
My assumption is that the only way I can do this is to specify that the element has a style="z-index:"
value that is the maximum the browser allows (int32?).
这是正确的吗?
相反,是否可以以某种方式获得元素的 z-index
,其中最高,并使此< div>
的 z-index
[最高元素的值] + 1
?例如:
Instead, would it be possible to somehow get the element's z-index
whose is highest, and make this <div>
's z-index
the [highest element's value] + 1
? For example:
$myDiv.css("z-index", $(document.body).highestZIndex() + 1);
模态JavaScriptwindows如何工作?
How do modal JavaScript "windows" work?
推荐答案
以下是如何做到这一点:
Here's how to do it :
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添加到该值并将其应用到您想要的任何位置。您可以像这样应用它:
highest_index now contains the highest z-index on the page... just add 1 to that value and apply it wherever you want. You can apply it like so :
your_element.style.zIndex = highest_index + 1;
这是使用jQuery实现相同功能的另一种方法:
Here's another way of achieving the same thing using jQuery :
var highest_index = 0;
$("[z-index]").each(function() {
if ($(this).attr("z-index") > highest_index) {
highest_index = $(this).attr("z-index");
}
});
同样,将新索引应用于元素的方式相同:
Again, same way to apply the new index to an element :
$("your_element").attr("z-index", highest_index + 1);
这篇关于CSS / JavaScript:使元素最顶层的z-index /最顶层的模态元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!