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.阅读更多关于他的发现的评论..

Answer 2

这是一个简单的javascript解决方案

function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": 0,
        "left": 0,
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.5)",
        "z-index": 10000,
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "30px",
        "font-weight": "bold",
        "cursor": "wait"
    }).appendTo("body");
}

function removeOverlay() {
    $("#overlay").remove();
}

演示:

http://jsfiddle.net/UziTech/9g0pko97/

要旨:

https://gist.github.com/UziTech/7edcaef02afa9734e8f2