jQuery: Como posso criar uma sobreposição simples?

Como posso criar uma sobreposição realmente básica em jQuery sem UI?

O que é um plugin leve?

Uma sobreposição é, simplesmente, uma divque fica fixa na tela (não importa se você rola a tela) e tem algum tipo de opacidade.

Este será o seu CSS para opacidade entre navegadores de 0,5:

#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;
}

Este será o seu código jQuery (sem necessidade de IU). Você apenas criará um novo elemento com o ID #overlay. Criar e destruir o DIV deve ser tudo o que você precisa.

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

Por motivos de desempenho, você pode querer ter o DIV oculto e definir a exibição para bloquear e nenhum como você precisa ou não.

Espero que ajude!

Edit: Como @Vitaly tão bem colocou, certifique-se de verificar seu DocType. Leia mais sobre os comentários sobre suas descobertas.

Aqui está uma solução simples apenas em 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();
}

Demo:

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

Essência:

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

Aqui está uma versão totalmente encapsulada que adiciona uma sobreposição (incluindo um botão de compartilhamento) a qualquer elemento IMG onde data-photo-overlay = 'true.

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

Se você já estiver usando jquery, não vejo por que não seria capaz de usar um plugin de sobreposição leve. Outras pessoas já escreveram alguns bons em jquery, então por que reinventar a roda?

Por favor, verifique este plugin jQuery,

blockUI

com isso você pode sobrepor toda a página ou elementos, funciona muito bem para mim,

Exemplos: bloquear um div: $('div.test').block({ message: null });

Bloqueie a página: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); Espero que ajude alguém

saudações

Por sobreposição, você quer dizer conteúdo que se sobrepõe / cobre o resto da página? Em HTML, você pode fazer isso usando um div que usa posicionamento absoluto ou fixo. Se ele precisasse ser gerado dinamicamente, o jQuery poderia simplesmente gerar um div com o estilo de posição definido apropriadamente.

O que você pretende fazer com a sobreposição? Se for estático, digamos, uma caixa simples sobrepondo algum conteúdo, apenas use o posicionamento absoluto com CSS. Se for dinâmico (eu acredito que isso é chamado de lightbox), você pode escrever algum código jQuery de modificação de CSS para mostrar / ocultar a sobreposição sob demanda.