jQuery: Jak mogę stworzyć prostą nakładkę?

95

Jak mogę stworzyć naprawdę podstawową nakładkę w jQuery bez interfejsu użytkownika?

Co to jest lekka wtyczka?

aoghq
źródło

Odpowiedzi:

202

Nakładka to po prostu element, divktóry pozostaje na ekranie (bez względu na to, czy przewijasz) i ma pewien rodzaj krycia.

To będzie Twój CSS dla krycia w różnych przeglądarkach 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;
}

To będzie Twój kod jQuery (nie jest potrzebny interfejs użytkownika). Po prostu utworzysz nowy element z nakładką # ID. Tworzenie i niszczenie DIV powinno wystarczyć.

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

Ze względu na wydajność możesz chcieć ukryć DIV i ustawić wyświetlanie na blokowanie i brak, tak jak tego potrzebujesz, lub nie.

Mam nadzieję, że to pomoże!

Edycja: Jak dobrze to ujął @Vitaly, sprawdź swój DocType. Przeczytaj więcej na temat komentarzy do jego ustaleń.

Frankie
źródło
To nie działa w IE8. „Nakładka” jest pokazana poniżej treści. Jakieś pomysły, jak to naprawić?
Witalij
9
Rozumiem. Musiał zmienić doctype z <! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.1 Transitional // EN"> na <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN">, aby IE rozumie „stanowisko: ustalone”.
Witalij
3
Ładny! Dzięki! Podzielę się Twoim odkryciem na to pytanie, aby ułatwić mijanie Googlera! ;)
Frankie
6
Jeśli chcesz dodać zawartość do tej nakładki, ale nie chcesz, aby była ona półprzezroczysta, użyj background: # 000000; background-color: rgba (0,0,0; .5) zamiast pozycji krycia. Tło: # 000000 przed rgba obsługuje starsze przeglądarki.
Shanimal
3
WSKAZÓWKA: Do obsługi różnych przeglądarek użyj półprzezroczystego obrazu 1x1px (gif lub png) ... wtedy możesz łatwo ustawić go jakobackground-image: url('semi-transparent-pixel.png');
jave.web
16

Oto proste rozwiązanie tylko 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();
}

Próbny:

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

Sens:

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

Tony Brix
źródło
4
A <table>? Czy to lata 90?
MECU
3

Oto w pełni hermetyzowana wersja, która dodaje nakładkę (w tym przycisk udostępniania) do dowolnego elementu IMG, gdzie 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 + "]");
        }
    }
)();
wloescher
źródło
1

Jeśli już używasz jquery, nie widzę powodu, dla którego nie miałbyś również używać lekkiej wtyczki nakładki. Inni ludzie już napisali kilka fajnych w jquery, więc po co wymyślać koło na nowo?

Dan Breen
źródło
1
która lekka wtyczka nakładki jest dostępna?
aoghq
15
Po co pożyczać koło z dzwoneczkami i gwizdkami, skoro można stworzyć całkowicie akceptowalne koło w 3 wierszach kodu? Wtyczki nie zawsze są najlepszym rozwiązaniem.
Joel
5
3 linie kodu, które mogą dobrze działać w FF, ale mogą być dziwactwa w niektórych wersjach IE. Przynajmniej za pomocą znanego narzędzia większość załamań zostało już rozwiązanych.
Dan Breen
6
Jeśli sugerujesz użycie wtyczki, powinieneś zasugerować jedną lub więcej, które uznasz za odpowiednie. W przeciwnym razie odpowiedź nie jest zbyt pomocna ...
Hinek
@Hinek - przeformułował pytanie po tym, jak odpowiedziałem. Początkowo poprosił o nakładkę bez korzystania z biblioteki, a ja sugerowałem, że korzystanie z niej nie jest dużo bardziej kosztowne niż frustracja, wdrażając ją od zera.
Dan Breen
1

Proszę sprawdzić tę wtyczkę jQuery,

blockUI

dzięki temu możesz nałożyć całą stronę lub elementy, dla mnie działa świetnie,

Przykłady: blokowanie elementu div: $('div.test').block({ message: null });

Zablokuj stronę: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); mam nadzieję, że komuś pomoże

Pozdrowienia

Pablo Rodriguez V.
źródło
0

Czy pod pojęciem nakładki rozumiecie treść, która nakłada się / zakrywa pozostałą część strony? W HTML można to zrobić, używając elementu div, który używa pozycjonowania bezwzględnego lub stałego. Gdyby trzeba było generować go dynamicznie, jQuery mógłby po prostu wygenerować element div z odpowiednio ustawionym stylem pozycji.

Jakub
źródło
0

Co zamierzasz zrobić z nakładką? Jeśli jest statyczny, powiedzmy, proste pole zachodzące na jakąś treść, po prostu użyj pozycjonowania bezwzględnego w CSS. Jeśli jest dynamiczny (wydaje mi się, że nazywa się to lightbox), możesz napisać kod jQuery modyfikujący CSS, aby pokazać / ukryć nakładkę na żądanie.

Illianthe
źródło