jQuery: come posso creare un semplice overlay?

Come posso creare un overlay di base in jQuery senza interfaccia utente?

Cos'è un plugin leggero?

Una sovrapposizione è, in poche parole, una divche rimane fissa sullo schermo (non importa se si scorre) e ha una sorta di opacità.

Questo sarà il tuo CSS per l'opacità cross browser di 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;
}

Questo sarà il tuo codice jQuery (non è necessaria alcuna interfaccia utente). Creerai solo un nuovo elemento con l'ID #overlay. Creare e distruggere il DIV dovrebbe essere tutto ciò di cui hai bisogno.

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

Per motivi di prestazioni potresti voler nascondere il DIV e impostare il display su bloccarlo e nessuno come ne hai bisogno o meno.

Spero che sia d'aiuto!

Modifica: come ha detto così bene @Vitaly, assicurati di controllare il tuo DocType. Leggi di più sui commenti sulle sue scoperte ..

Ecco una semplice soluzione 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();
}

Demo:

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

Sintesi:

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

Ecco una versione completamente incapsulata che aggiunge una sovrapposizione (incluso un pulsante di condivisione) a qualsiasi elemento IMG in cui 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 stai già utilizzando jquery, non vedo perché non potresti utilizzare anche un plugin di sovrapposizione leggero. Altre persone ne hanno già scritte di belle in jquery, quindi perché reinventare la ruota?

Si prega di controllare questo plugin jQuery,

blockUI

con questo puoi sovrapporre tutta la pagina o gli elementi, funziona alla grande per me,

Esempi: blocco di un div: $('div.test').block({ message: null });

Blocca la pagina: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); spero che aiuti qualcuno

Saluti

Per overlay intendi il contenuto che si sovrappone / copre il resto della pagina? In HTML, puoi farlo utilizzando un div che utilizza il posizionamento assoluto o fisso. Se doveva essere generato dinamicamente, jQuery potrebbe semplicemente generare un div con lo stile di posizione impostato in modo appropriato.

Cosa intendi fare con l'overlay? Se è statico, ad esempio, un semplice riquadro che si sovrappone a un contenuto, usa semplicemente il posizionamento assoluto con CSS. Se è dinamico (credo che questo sia chiamato lightbox), puoi scrivere del codice jQuery di modifica CSS per mostrare / nascondere l'overlay su richiesta.