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

Question

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

什么是轻量级插件？

Answer 1

请检查这个 jQuery 插件，

blockUI

这样你可以覆盖所有页面或元素，对我来说非常有用，

示例： 阻止一个div： $('div.test').block({ message: null });

屏蔽页面： $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); 希望对某人有所帮助

问候

Answer 2

简单地说，叠加层就是一个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。阅读更多关于他的发现的 cmets..

Answer 3

这是一个简单的纯 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

Answer 4

这是一个完全封装的版本，它为 data-photo-overlay='true 的任何 IMG 元素添加了一个叠加层（包括一个分享按钮）。

JSFiddle http://jsfiddle.net/wloescher/7y6UX/19/

HTML

<img id="my-photo-id" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" alt="Photo" data-photo-overlay="true" />

CSS

#photoOverlay {
    background: #ccc;
    background: rgba(0, 0, 0, .5);
    display: none;
    height: 50px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 50px;
    z-index: 1000;
}

#photoOverlayShare {
    background: #fff;
    border: solid 3px #ccc;
    color: #ff6a00;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin-left: auto;
    margin: 15px;
    padding: 5px;
    position: absolute;
    left: calc(100% - 100px);
    text-transform: uppercase;
    width: 50px;
}

JavaScript

(function () {
    // Add photo overlay hover behavior to selected images
    $("img[data-photo-overlay='true']").mouseenter(showPhotoOverlay);

    // Create photo overlay elements
    var _isPhotoOverlayDisplayed = false;
    var _photoId;
    var _photoOverlay = $("<div id='photoOverlay'></div>");
    var _photoOverlayShareButton = $("<div id='photoOverlayShare'>Share</div>");

    // Add photo overlay events
    _photoOverlay.mouseleave(hidePhotoOverlay);
    _photoOverlayShareButton.click(sharePhoto);

    // Add photo overlay elements to document
    _photoOverlay.append(_photoOverlayShareButton);
    _photoOverlay.appendTo(document.body);

    // Show photo overlay
    function showPhotoOverlay(e) {
        // Get sender 
        var sender = $(e.target || e.srcElement);

        // Check to see if overlay is already displayed
        if (!_isPhotoOverlayDisplayed) {
            // Set overlay properties based on sender
            _photoOverlay.width(sender.width());
            _photoOverlay.height(sender.height());

            // Position overlay on top of photo
            if (sender[0].x) {
                _photoOverlay.css("left", sender[0].x + "px");
                _photoOverlay.css("top", sender[0].y) + "px";
            }
            else {
                // Handle IE incompatibility
                _photoOverlay.css("left", sender.offset().left);
                _photoOverlay.css("top", sender.offset().top);
            }

            // Get photo Id
            _photoId = sender.attr("id");

            // Show overlay
            _photoOverlay.animate({ opacity: "toggle" });
            _isPhotoOverlayDisplayed = true;
        }
    }

    // Hide photo overlay
    function hidePhotoOverlay(e) {
        if (_isPhotoOverlayDisplayed) {
            _photoOverlay.animate({ opacity: "toggle" });
            _isPhotoOverlayDisplayed = false;
        }
    }

    // Share photo
    function sharePhoto() {
        alert("TODO: Share photo. [PhotoId = " + _photoId + "]");
        }
    }
)();

Answer 5

您打算如何处理叠加层？如果它是静态的，比如一个简单的框重叠一些内容，只需使用 CSS 的绝对定位。如果它是动态的（我相信这被称为灯箱），您可以编写一些 CSS 修改 jQuery 代码来按需显示/隐藏叠加层。

Answer 6

您所说的覆盖是指重叠/覆盖页面其余部分的内容吗？在 HTML 中，您可以通过使用绝对或固定定位的 div 来做到这一点。如果需要动态生成，jQuery 可以简单地生成一个设置适当位置样式的 div。

Answer 7

如果您已经在使用 jquery，我不明白为什么您也不能使用轻量级覆盖插件。其他人已经用 jquery 写了一些不错的，那为什么要重新发明轮子呢？