javascript覆盖在自定义html元素上

javascript overlay on a custom html element

本文关键字：元素 html 自定义 覆盖 javascript      更新时间：2023-09-26

我正在尝试制作一个简单的Overlay模块，使我能够在自定义DOM元素上进行覆盖。问题是覆盖div的css指定了position:absolute。但是应该在其上应用覆盖的元素可能具有位置：静态，在这种情况下，覆盖应用不正确。如何克服这个问题？我已经想出了这个主意，但我不确定它是否好。

//js
if ($(elem).css('position') == 'static') {
   $(elem).css('position', 'relative');
}
$('<div></div>').prependTo(elem).addClass('overlay').css('z-index', 100);
// css
div.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.75;
    filter: alpha(opacity=75);
}

托马斯·安徒生作品的建议。一个轻微的缺点是复杂度稍高，并且覆盖的位置没有固定到元素的位置。另一种方法可能是这样做：

div.overlay {
    position: absolute;
    background: #000;
    opacity: 0.75;
    filter: alpha(opacity=75);
}
var width = $(elem).width();
var height = $(elem).height();
$('<div></div>')
    .width(width)
    .height(height)
    .prependTo(elem)
    .addClass('overlay')
    .css('z-index', 100)

在这里，我设置位置：绝对，而不指定顶部/左侧，这将导致覆盖层从流中取出，同时保持其偏移。我想这是不常见的用法，但我相信我可以信赖。

我提出的最初的解决方案是一个真正的黑客攻击，已经给我带来了一些问题。

相关文章：