jQuery: Bagaimana cara membuat overlay sederhana?

Bagaimana cara membuat overlay yang sangat mendasar di jQuery tanpa UI?

Apa itu plugin ringan?

Sederhananya, overlay adalah divyang tetap di layar (tidak peduli jika Anda menggulir) dan memiliki semacam opasitas.

Ini akan menjadi CSS Anda untuk opasitas lintas browser 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;
}

Ini akan menjadi kode jQuery Anda (tidak perlu UI). Anda hanya akan membuat elemen baru dengan ID #overlay. Membuat dan menghancurkan DIV harus menjadi semua yang Anda butuhkan.

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

Untuk alasan kinerja, Anda mungkin ingin DIV disembunyikan dan mengatur tampilan untuk memblokir dan tidak ada saat Anda membutuhkannya atau tidak.

Semoga membantu!

Edit: Seperti yang dikatakan @Vitaly dengan baik, pastikan untuk memeriksa DocType Anda. Baca lebih lanjut di komentar tentang temuannya ..

Berikut adalah solusi hanya javascript sederhana

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/

Inti:

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

Ini adalah versi yang sepenuhnya dikemas yang menambahkan overlay (termasuk tombol bagikan) ke elemen IMG mana pun di mana 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 + "]");
        }
    }
)();

Jika Anda sudah menggunakan jquery, saya tidak mengerti mengapa Anda juga tidak dapat menggunakan plugin overlay ringan. Orang lain telah menulis beberapa yang bagus di jquery, jadi mengapa menciptakan kembali rodanya?

Silakan periksa plugin jQuery ini,

blockUI

dengan ini, Anda dapat menghamparkan semua halaman atau elemen, bekerja sangat baik untuk saya,

Contoh: Memblokir div: $('div.test').block({ message: null });

Blokir halaman: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); Semoga bisa membantu seseorang

Salam pembuka

Yang Anda maksud dengan overlay adalah konten yang tumpang tindih / menutupi sisa halaman? Dalam HTML, Anda dapat melakukan ini dengan menggunakan div yang menggunakan pemosisian absolut atau tetap. Jika perlu dibuat secara dinamis, jQuery bisa dengan mudah menghasilkan div dengan gaya posisi yang disetel dengan tepat.

Apa yang ingin Anda lakukan dengan overlay? Jika statis, katakanlah, kotak sederhana yang tumpang tindih dengan beberapa konten, cukup gunakan pemosisian absolut dengan CSS. Jika dinamis (saya yakin ini disebut lightbox), Anda dapat menulis beberapa kode jQuery pemodifikasi CSS untuk menampilkan / menyembunyikan overlay sesuai permintaan.