[英]CSS/JavaScript: Make element top-most z-index/top-most modal element
I would like to make an element (eg a <div>
) be the top-most layer on the page. 我想让一个元素(例如<div>
)成为页面上最顶层的元素。
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?). 我的假设是,我能做到这一点的唯一方法是指定元素的style="z-index:"
值是浏览器允许的最大值(int32?)。
Is this correct? 这个对吗?
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
? 相反,是否有可能以某种方式获得最高的元素的z-index
,并使这个<div>
的z-index
成为[highest element's value] + 1
? For example: 例如:
$myDiv.css("z-index", $(document.body).highestZIndex() + 1);
How do modal JavaScript "windows" work? 模态JavaScript“windows”如何工作?
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 now contains the highest z-index on the page... just add 1 to that value and apply it wherever you want. highest_index现在包含页面上最高的z-index ...只需将1添加到该值并将其应用于您想要的任何位置。 You can apply it like so : 你可以像这样申请:
your_element.style.zIndex = highest_index + 1;
Here's another way of achieving the same thing using jQuery : 这是使用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);
What about stacking context? 堆叠上下文怎么样? It is not always true that: On a document highest z-index will be on top. 并非总是这样:在文档上,最高的z-index将位于顶部。 See: http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ . 请参阅: http : //philipwalton.com/articles/what-no-one-told-you-about-z-index/ 。 If you do not take stacking context into account, setting a billion may not be enough to make your element on the top-most. 如果您不考虑堆叠上下文,设置十亿可能不足以使您的元素位于最顶层。
Sheavi's jQuery solution doesn't work because z-index is a css style, not an attribute. Sheavi的jQuery解决方案不起作用,因为z-index是一种css样式,而不是一种属性。
Try this instead: 试试这个:
raiseToHighestZindex = function(elem) {
var highest_index = 0;
$("*").each(function() {
var cur_zindex= $(this).css("z-index");
if (cur_zindex > highest_index) {
highest_index = cur_zindex;
$(elem).css("z-index", cur_zindex + 1);
}
});
return highest_index;
};
Return value may not be what you expect due to Javascript's async nature, but calling the function on any element will work fine. 由于Javascript的异步性质,返回值可能不是您所期望的,但调用任何元素上的函数都可以正常工作。
http://abcoder.com/javascript/a-better-process-to-find-maximum-z-index-within-a-page/ - >找到最大z-index并为其指定+1。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.