jQuery: Wie kann ich ein einfaches Overlay erstellen?

Wie kann ich in jQuery ohne Benutzeroberfläche ein wirklich einfaches Overlay erstellen?

Was ist ein leichtes Plugin?

Ein Overlay ist einfach ausgedrückt ein Overlay, divdas auf dem Bildschirm fixiert bleibt (egal ob Sie scrollen) und eine gewisse Deckkraft aufweist.

Dies ist Ihr CSS für eine browserübergreifende Deckkraft von 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;
}

Dies ist Ihr jQuery-Code (keine Benutzeroberfläche erforderlich). Sie erstellen lediglich ein neues Element mit der ID #overlay. Das Erstellen und Zerstören des DIV sollte alles sein, was Sie brauchen.

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

Aus Leistungsgründen möchten Sie möglicherweise den DIV ausblenden und die Anzeige so einstellen, dass sie blockiert wird, und keine, wenn Sie sie benötigen oder nicht.

Ich hoffe es hilft!

Bearbeiten: Wie @Vitaly es so gut ausdrückt, überprüfen Sie unbedingt Ihren DocType. Lesen Sie mehr über die Kommentare zu seinen Ergebnissen.

Hier ist eine einfache Lösung nur für 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/

Kern:

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

Hier ist eine vollständig gekapselte Version, die jedem IMG-Element eine Überlagerung (einschließlich einer Freigabeschaltfläche) hinzufügt, bei der data-photo-overlay = 'true ist.

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

Wenn Sie bereits jquery verwenden, verstehe ich nicht, warum Sie nicht auch ein leichtes Overlay-Plugin verwenden können. Andere Leute haben bereits einige nette in jquery geschrieben. Warum also das Rad neu erfinden?

Bitte überprüfen Sie dieses jQuery-Plugin.

blockUI

Damit können Sie alle Seiten oder Elemente überlagern. Funktioniert hervorragend für mich.

Beispiele: Blockiere ein div: $('div.test').block({ message: null });

Blockiere die Seite: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); Hoffe das hilft jemandem

Schöne Grüße

Mit Überlagerung meinen Sie Inhalte, die den Rest der Seite überlappen / abdecken? In HTML können Sie dazu ein div verwenden, das eine absolute oder feste Positionierung verwendet. Wenn es dynamisch generiert werden musste, konnte jQuery einfach ein Div mit dem entsprechend festgelegten Positionsstil generieren.

Was haben Sie mit dem Overlay vor? Wenn es sich beispielsweise um ein einfaches Feld handelt, das einige Inhalte überlappt, verwenden Sie einfach die absolute Positionierung mit CSS. Wenn es dynamisch ist (ich glaube, dies wird als Leuchtkasten bezeichnet), können Sie CSS-modifizierenden jQuery-Code schreiben, um das Overlay bei Bedarf anzuzeigen / auszublenden.