jQuery: ¿Cómo puedo crear una superposición simple?

¿Cómo puedo crear una superposición realmente básica en jQuery sin UI?

¿Qué es un complemento ligero?

Una superposición es, en pocas palabras, una divque permanece fija en la pantalla (sin importar si se desplaza) y tiene algún tipo de opacidad.

Este será su CSS para una opacidad 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á su código jQuery (no se necesita interfaz de usuario). Simplemente va a crear un nuevo elemento con el ID # overlay. Crear y destruir el DIV debería ser todo lo que necesita.

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

Por razones de rendimiento, es posible que desee tener el DIV oculto y configurar la pantalla para bloquear y ninguno, ya que lo necesite o no.

¡Espero eso ayude!

Editar: Como @Vitaly lo dijo tan bien, asegúrese de verificar su DocType. Lea más sobre los comentarios sobre sus hallazgos.

Aquí hay una solución simple de solo 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();
}

Manifestación:

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

Esencia:

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

Aquí hay una versión completamente encapsulada que agrega una superposición (incluido un botón para compartir) a cualquier elemento IMG donde 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 + "]");
        }
    }
)();

Si ya está usando jquery, no veo por qué no podría usar también un complemento de superposición ligero. Otras personas ya han escrito algunos buenos en jquery, así que ¿por qué reinventar la rueda?

Por favor, consulte este complemento de jQuery,

blockUI

con esto puedes superponer toda la página o elementos, funciona muy bien para mí,

Ejemplos: Bloquear un div: $('div.test').block({ message: null });

Bloquear la página: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); espero que ayude a alguien

Saludos

Por superposición, ¿te refieres a contenido que se superpone / cubre el resto de la página? En HTML, puede hacer esto usando un div que use posicionamiento absoluto o fijo. Si fuera necesario generarlo dinámicamente, jQuery podría simplemente generar un div con el estilo de posición establecido apropiadamente.

¿Qué piensa hacer con la superposición? Si es estático, digamos, un cuadro simple que se superpone a algún contenido, simplemente use el posicionamiento absoluto con CSS. Si es dinámico (creo que esto se llama caja de luz), puede escribir código jQuery que modifique CSS para mostrar / ocultar la superposición a pedido.