jQuery: Як я можу створити просте накладання?

Як я можу створити справді базове накладання в jQuery без UI?

Що таке легкий плагін?

Простим словом, накладене зображення divзалишається фіксованим на екрані (незалежно від прокрутки) і має якусь непрозорість.

Це буде ваш CSS для непрозорості браузера 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;
}

Це буде ваш код jQuery (інтерфейс не потрібен). Ви просто збираєтеся створити новий елемент з ідентифікатором # overlay. Створення та знищення DIV має бути усім, що вам потрібно.

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

З міркувань продуктивності ви можете хотіти, щоб DIV був прихований і встановив дисплей блокувати, а жоден не потребує вас чи ні.

Сподіваюся, це допомагає!

Редагувати: Як @Vitaly так добре висловився, обов’язково перевірте свій DocType. Детальніше читайте про коментарі до його висновків ..

Ось просте рішення лише для 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();
}

Демонстрація:

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

Суть:

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

Ось повністю інкапсульована версія, яка додає накладення (включаючи кнопку спільного доступу) до будь-якого елемента IMG, де 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 + "]");
        }
    }
)();

Якщо ви вже використовуєте jquery, я не розумію, чому ви також не зможете використовувати легкий плагін накладання. Інші люди вже написали кілька приємних у jquery, то навіщо заново винаходити колесо?

Перевірте цей плагін jQuery,

blockUI

за допомогою цього ви можете накласти всі сторінки чи елементи, це чудово для мене працює,

Приклади: Блокування div: $('div.test').block({ message: null });

Блокувати сторінку: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); Сподіваюся, що хтось допоможе

Привітання

Під накладом ви маєте на увазі вміст, який перекриває / охоплює решту сторінки? У HTML ви можете це зробити, використовуючи div, який використовує абсолютне або фіксоване позиціонування. Якщо його потрібно було генерувати динамічно, jQuery може просто генерувати div з відповідним чином встановленим стилем позиції.

Що ви маєте намір зробити з накладкою? Якщо це статичний, скажімо, простий ящик, що перекриває деякий вміст, просто використовуйте абсолютне позиціонування за допомогою CSS. Якщо він динамічний (я вважаю, що це називається лайтбокс), ви можете написати якийсь модифікуючий CSS код jQuery, щоб показати / приховати накладання на вимогу.