jQuery : 간단한 오버레이를 어떻게 만들 수 있습니까?

UI없이 jQuery에서 정말 기본적인 오버레이를 어떻게 만들 수 있습니까?

경량 플러그인이란 무엇입니까?

오버레이는 단순히 넣어되지 div체류가 화면에 고정 (상관없이 스크롤 경우)과 투명도의 어떤 종류가있다.

크로스 브라우저 불투명도 0.5에 대한 CSS가됩니다.

#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 코드가 될 것입니다 (UI 필요 없음). ID #overlay로 새 요소를 만들 것입니다. DIV를 만들고 파괴하는 것만으로 충분합니다.

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

들어 성능상의 이유로 당신은 DIV가 숨겨져있다 싶어 수도 블록에 표시 및 없음을 설정 당신이 그것을 필요 여부한다.

도움이 되었기를 바랍니다.

편집 : @Vitaly가 잘 말했듯이 DocType을 확인하십시오. 그의 발견에 대한 의견에 대해 자세히 읽어보십시오 ..

다음은 간단한 자바 스크립트 전용 솔루션입니다.

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

다음은 data-photo-overlay = 'true 인 모든 IMG 요소에 오버레이 (공유 버튼 포함)를 추가하는 완전히 캡슐화 된 버전입니다.

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

자바 스크립트

(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 코드를 작성하여 필요에 따라 오버레이를 표시하거나 숨길 수 있습니다.