jQuery:如何创建一个简单的叠加层？

Question

如何在没有 UI 的情况下在 jQuery 中创建一个真正基本的叠加层？

什么是轻量级插件？

Answer 1

简单来说，叠加层是一个 div，它固定在屏幕上(无论您是否滚动)并且具有某种不透明度。

这将是您的跨浏览器不透明度为 0.5 的 CSS:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

这将是您的 jQuery 代码(不需要 UI)。您只需创建一个 ID 为#overlay 的新元素。 您只需要创建和销毁 DIV。

var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)

出于性能方面的原因，您可能希望隐藏 DIV 并根据需要将显示设置为阻塞和无。

希望对您有所帮助!

编辑:正如@Vitaly 所说的那样，请务必检查您的 DocType。阅读更多关于他的发现的评论..