jQuery: Làm cách nào để tạo một lớp phủ đơn giản?

Làm cách nào để tạo lớp phủ thực sự cơ bản trong jQuery mà không có giao diện người dùng?

Plugin nhẹ là gì?

Nói một cách đơn giản, một lớp phủ divvẫn cố định trên màn hình (bất kể bạn cuộn) và có một số loại độ mờ.

Đây sẽ là CSS của bạn cho độ mờ của trình duyệt chéo là 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;
}

Đây sẽ là mã jQuery của bạn (không cần giao diện người dùng). Bạn sẽ chỉ tạo một phần tử mới với ID #overlay. Tạo và phá hủy DIV phải là tất cả những gì bạn cần.

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

Vì lý do hiệu suất, bạn có thể muốn ẩn DIV và đặt màn hình để chặn và không chặn khi bạn cần hay không.

Hy vọng nó giúp!

Chỉnh sửa: Vì @Vitaly rất hay, hãy nhớ kiểm tra DocType của bạn. Đọc thêm các bình luận về phát hiện của anh ấy ..

Đây là một giải pháp chỉ javascript đơn giản

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

Bản giới thiệu:

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

Ý chính:

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

Đây là một phiên bản được đóng gói đầy đủ bổ sung lớp phủ (bao gồm cả nút chia sẻ) vào bất kỳ phần tử IMG nào có 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 + "]");
        }
    }
)();

Nếu bạn đã sử dụng jquery, tôi không hiểu tại sao bạn cũng không thể sử dụng plugin lớp phủ nhẹ. Những người khác đã viết một số cái hay bằng jquery, vậy tại sao phải phát minh lại bánh xe?

Vui lòng kiểm tra plugin jQuery này,

blockUI

với điều này, bạn có thể phủ lên tất cả các trang hoặc các phần tử, phù hợp với tôi,

Ví dụ: Chặn một div: $('div.test').block({ message: null });

Chặn trang: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); Mong rằng sẽ giúp được ai đó

Lời chào hỏi

Theo bạn lớp phủ có nghĩa là nội dung chồng chéo / bao phủ phần còn lại của trang? Trong HTML, bạn có thể làm điều này bằng cách sử dụng một div sử dụng định vị tuyệt đối hoặc cố định. Nếu nó cần được tạo động, jQuery có thể chỉ cần tạo một div với kiểu định vị được đặt thích hợp.

Bạn định làm gì với lớp phủ? Nếu nó tĩnh, chẳng hạn, một hộp đơn giản chồng lên một số nội dung, chỉ cần sử dụng định vị tuyệt đối với CSS. Nếu nó động (tôi tin rằng đây được gọi là lightbox), bạn có thể viết một số mã jQuery sửa đổi CSS để hiển thị / ẩn lớp phủ theo yêu cầu.