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

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

UI 없이 jQuery에서 정말 기본적인 오버레이를 만들려면 어떻게 해야 합니까?

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

오버레이는 간단히 말해서, a.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 플러그인을 확인해주십시오.

블록 UI

이것으로 당신은 모든 페이지나 요소들을 덧씌울 수 있고, 나에게 아주 적합합니다.

예:디바 차단: $('div.test').block({ message: null });

페이지 차단: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); 누군가에게 도움이 되길 바랍니다.

인사말

이미 jquery를 사용하고 있다면 경량 오버레이 플러그인을 사용할 수 없는 이유를 모르겠습니다.다른 사람들은 이미 jquery로 멋진 것들을 썼는데, 왜 바퀴를 다시 발명합니까?

오버레이란 페이지의 나머지 부분을 겹치거나 덮는 내용을 의미합니까?HTML에서는 절대 위치 또는 고정 위치를 사용하는 div를 사용하여 이 작업을 수행할 수 있습니다.동적으로 생성해야 하는 경우 jQuery는 단순히 위치 스타일을 적절하게 설정한 div를 생성할 수 있습니다.

오버레이는 어떻게 하실 건가요?정적인 경우, 예를 들어 일부 콘텐츠와 중복되는 단순한 상자라면 CSS와 함께 절대 위치 지정을 사용하십시오.동적인 경우(이것을 라이트박스라고 부르는 것으로 생각합니다), 요구에 따라 오버레이를 표시/숨기기 위해 CSS 수정 jQuery 코드를 작성할 수 있습니다.

언급URL : https://stackoverflow.com/questions/1718951/jquery-how-can-i-create-a-simple-overlay