jQuery: Nasıl basit bir kaplama oluşturabilirim?

UI olmadan jQuery'de nasıl gerçekten temel bir kaplama oluşturabilirim?

Hafif bir eklenti nedir?

Basitçe ifade etmek gerekirse, ekranda sabitdiv kalan (kaydırsanız bile) ve bir çeşit opaklığa sahip olan bir yer paylaşımıdır .

Bu, 0,5'lik tarayıcılar arası opaklık için CSS'niz olacaktır:

#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;
}

Bu sizin jQuery kodunuz olacaktır (kullanıcı arayüzüne gerek yoktur). #Overlay kimliğiyle yeni bir öğe oluşturacaksınız. DIV'yi yaratmak ve yok etmek ihtiyacınız olan tek şey olmalıdır.

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

İçin performans nedenleriyle Eğer DIV gizli ve adres isteyebilirsin engellemek için ekranı ve hiçbiri ayarı İhtiyacınız veya değil.

Umarım yardımcı olur!

Düzenleme: @Vitaly'nin çok iyi ifade ettiği gibi, DocType'ınızı kontrol ettiğinizden emin olun. Bulguları hakkındaki yorumların devamını okuyun ..

İşte sadece basit bir javascript çözümü

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/

Ana fikir:

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

Burada, data-photo-overlay = 'true olan herhangi bir IMG öğesine bir kaplama (bir paylaş düğmesi dahil) ekleyen tam kapsamlı bir sürüm.

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

Zaten jquery kullanıyorsanız, neden hafif bir overlay eklentisi de kullanamayacağınızı anlamıyorum. Diğer insanlar jQuery'de zaten güzel şeyler yazdılar, öyleyse neden tekerleği yeniden icat edelim?

Lütfen bu jQuery eklentisini kontrol edin,

blockUI

bununla tüm sayfayı veya öğeleri üst üste koyabilirsiniz, benim için harika çalışıyor,

Örnekler: Bir div'i engelleme: $('div.test').block({ message: null });

Sayfayı engelleyin: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); Umarım birine yardımcı olur

Selamlar

Kaplama derken, sayfanın geri kalanıyla örtüşen / kaplayan içeriği mi kastediyorsunuz? HTML'de, mutlak veya sabit konumlandırma kullanan bir div kullanarak bunu yapabilirsiniz. Dinamik olarak oluşturulması gerekiyorsa, jQuery, konum stili uygun şekilde ayarlanmış bir div oluşturabilir.

Yer paylaşımıyla ne yapmayı düşünüyorsunuz? Statik ise, örneğin, bazı içeriklerle örtüşen basit bir kutu ise, CSS ile mutlak konumlandırmayı kullanın. Dinamikse (buna ışık kutusu dendiğine inanıyorum), kaplamayı isteğe bağlı olarak göstermek / gizlemek için bazı CSS değiştirici jQuery kodu yazabilirsiniz.