jQuery：如何创建简单的覆盖？

在没有UI的情况下，如何在jQuery中创建真正基本的覆盖

---

什么是轻量级插件？

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

所说的覆盖是指覆盖页面其余部分的内容？在HTML中，可以通过使用使用绝对或固定定位的div来实现这一点。如果需要动态生成，jQuery只需使用适当设置的position样式生成一个div即可。

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

简单地说，覆盖层是一个

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)

var overlay=jQuery（“”）；
overlay.appendTo（document.body）

出于性能原因您可能需要隐藏DIV，并根据需要将显示设置为block和none

希望有帮助

---

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

这是一个完全封装的版本，它在任何IMG元素中添加了一个覆盖（包括一个共享按钮），其中data photo overlay='true'

JSFiddle

HTML

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

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 + "]");
        }
    }
)();

（函数（）{
//将照片覆盖悬停行为添加到选定图像
$（“img[data photo overlay='true']）；
//创建照片覆盖元素
var_isPhotoOverlayDisplayed=false；
var_photoId；
var_photoOverlay=$（“”）；
var_photoOverlayShareButton=$（“股份”）；
//添加照片覆盖事件
_mouseleave（hidePhotoOverlay）；
_照片覆盖共享按钮。单击（共享照片）；
//向文档中添加照片覆盖元素
_photoOverlay.append（_photoOverlayShareButton）；
_photoOverlay.appendTo（document.body）；
//显示照片覆盖图
函数showPhotoOverlay（e）{
//获取发送者
var sender=$（e.target | | e.src元素）；
//检查覆盖是否已显示
如果（！\u iSphotoOverlay显示）{
//根据发件人设置覆盖属性
_photoOverlay.width（sender.width（））；
_photoOverlay.height（sender.height（））；
//将覆盖层放置在照片顶部
if（发送方[0].x）{
_css（“左”，发送方[0].x+“px”）；
_photoOverlay.css（“top”，发送方[0].y）+“px”；
}
否则{
//处理IE不兼容
_css（“左”，sender.offset（）.left）；
_css（“top”，sender.offset（）.top）；
}
//获取照片Id
_photoId=sender.attr（“id”）；
//显示覆盖图
_设置动画（{opacity:“toggle”}）；
_isPhotoOverlayDisplayed=真；
}
}
//隐藏照片覆盖
函数hidePhotoOverlay（e）{
如果（_iSphotoOverlay显示）{
_设置动画（{opacity:“toggle”}）；
_isPhotoOverlayDisplayed=假；
}
}
//分享照片
函数sharePhoto（）{
警报（“TODO:共享照片。[PhotoId=“+\u PhotoId+”]”）；
}
}
)();

这里是一个简单的纯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();
}

函数显示覆盖（文本）{
$（“+text+”）.css({
“位置”：“固定”，
“顶部”：0，
“左”：0，
“宽度”：“100%”，
“高度”：“100%”，
“背景色”：“rgba（0,0,0,5）”，
“z指数”：10000，
“垂直对齐”：“中间”，
“文本对齐”：“居中”，
“颜色”：“fff”，
“字体大小”：“30px”，
“字体大小”：“粗体”，
“游标”：“等待”
}).附于（“主体”）；
}
函数removeOverlay（）{
$（“#覆盖”）.remove（）；
}

演示：

要点：

---

请检查此jQuery插件

有了它，你可以覆盖所有的页面或元素，对我来说非常好

示例： a座分区：

$（'div.test'）.block（{message:null}）；

阻止页面：

$.blockUI（{消息：'稍等…}）；

希望能帮助别人

---

问候

哪种轻量级叠加插件？既然你可以用3行代码创建一个完全可以接受的轮子，为什么还要借用一个带铃铛和口哨的轮子？插件并不总是最好的解决方案。3行代码可能在FF中很好地工作，但在某些版本的IE中可能会有一些怪癖。至少有一个已知的工具，大多数怪癖已经解决了。如果你建议使用插件，你应该推荐一个或多个你认为合适的。否则答案就没有什么帮助了…@Hinek-在我回答后，他重新措辞了这个问题。他最初要求在不使用库的情况下使用一个覆盖，我建议使用一个覆盖并不会比从零开始实现一个覆盖带来更多的开销。这在IE8中不起作用。“覆盖”显示在内容下方。有没有办法解决这个问题？明白了。不得不将doctype从更改为，以使IE理解“位置：已修复”。很好！谢谢我将与大家分享你在这个问题上的发现，让谷歌路过时更容易些！；）如果您想将内容添加到该覆盖，但不希望它是半透明的，请使用backgrou

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();
}