jquery - 使用 jquery 如何公开 DOM 树上较低的单个 DOM 元素？

Question

我想以单个 DOM 元素为目标，并通过在覆盖屏幕上覆盖所有其他元素的同时保持其可见来公开它。

就像 jQuery.expose() 一样 http://jquerytools.github.io/documentation/toolbox/expose.html

上面的问题是，如果元素是 DOM 树上较低的子元素，它就不起作用。即，如果元素 Y 位于顶层，并且元素 X 是 Y 的子元素，则调用 X.expose() 会创建一个叠加 div，该 div 在 Y 上进行 z 索引。X 的 z 索引设置为 9998，但它是一个子元素Y 的，因此它位于叠加 div 下方。

非常欢迎替代解决方案。我考虑过执行 .clone() 然后 appendTo('body')，然后使用 offset() 定位克隆，但由于继承的 css 属性，.clone() 并不总是产生精确的副本。

Answer 1

不要在叠加层中附加目标 DOM 元素，您将无法获得所需的效果。

您可以做的是将目标 DOM 元素和叠加层附加到同一个容器(例如主体)...

$('#my-target').appendTo($('body'));

...然后您也可以对叠加层执行相同的操作...

$('#my-overlay').appendTo($('body'));

...然后您可以调整两个元素的 z-index...

$('#my-target').css('z-index', 9999);
$('#my-overlay').css('z-index', 9998);

...或者，您可以使用...完成上述所有操作

$('#my-target').appendTo($('body')).css('z-index', 9999);
$('#my-overlay').appendTo($('body')).css('z-index', 9998);