jQuery: मैं एक साधारण ओवरले कैसे बना सकता हूं?

Question

मैं UI के बिना jQuery में वास्तव में बुनियादी ओवरले कैसे बना सकता हूं?

एक हल्का प्लगइन क्या है?

Answer 1

एक उपरिशायी, बस रखा जाता है, जो स्क्रीन पर स्थिरdiv रहता है (कोई फर्क नहीं पड़ता कि आप स्क्रॉल करते हैं) और किसी प्रकार की अस्पष्टता है।

यह 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 कोड (कोई UI आवश्यक नहीं) होगा। आप आईडी #overlay के साथ एक नया तत्व बनाने जा रहे हैं। DIV को बनाना और नष्ट करना आप सभी की आवश्यकता होनी चाहिए।

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

के लिए प्रदर्शन के कारण आप DIV छिपा हुआ है चाहता हूँ सकता है और ब्लॉक करने के लिए प्रदर्शन और कोई भी स्थापित करने के रूप में आप यह नहीं की जरूरत है या।

आशा करता हूँ की ये काम करेगा!

संपादित करें: जैसा कि @Vitaly ने इसे अच्छी तरह से रखा है, अपने DocType की जांच करना सुनिश्चित करें। उनके निष्कर्षों पर टिप्पणियों पर अधिक पढ़ें ..

Comments

यह IE8 में काम नहीं करता है। "ओवरले" सामग्री के नीचे दिखाया गया है। इसे ठीक करने का कोई तरीका?

— विटाली

समझ गया। DctTYPE HTML PUBLIC "- // W3C // DTD HTML 4.1 ट्रांस्फ़ॉर्म // EN"> से <! DOCTYPE HTML PUBLIC "- // W3C / DTD XHTML 1.0 ट्रांस्फ़ॉर्म // EN"> बनाने के लिए doctype को बदलना पड़ा। IE समझ "स्थिति: तय"।

— विटाली

अच्छा! धन्यवाद! मैं इस सवाल पर अपनी खोज को साझा करने जा रहा हूं ताकि इसे Googler द्वारा पारित करना आसान हो जाए! ;)

— फ्रेंकी

यदि आप उस ओवरले में सामग्री जोड़ना चाहते हैं, लेकिन यह अर्ध अपारदर्शी नहीं होना चाहते, तो पृष्ठभूमि का उपयोग करें: # 000000; पृष्ठभूमि-रंग: अस्पष्टता प्रविष्टियों के बजाय rgba (0,0,0, .5)। पृष्ठभूमि: # 000000 से पहले rgba पुराने ब्राउज़र का समर्थन करता है।

— शनीमल

TIP: क्रॉस-ब्राउज़र सपोर्ट के लिए 1x1px अर्ध-पारदर्शी छवि (gif या png) का उपयोग करें ... फिर आप इसे आसानी से सेट कर सकते हैंbackground-image: url('semi-transparent-pixel.png');

— jave.web

Answer 2

यहाँ एक सरल जावास्क्रिप्ट केवल समाधान है

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

Comments

ए <table>? क्या यह 1990 का दशक है?

— MECU

Answer 3

यहाँ एक पूरी तरह से संक्षिप्त संस्करण है जो किसी भी IMG तत्व के लिए एक ओवरले (एक शेयर बटन सहित) जोड़ता है जहां डेटा-फोटो-ओवरले = सच है।

JSFiddle http://jsfiddle.net/wloescher/7y6UX/19/

एचटीएमएल

<img id="my-photo-id" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" alt="Photo" data-photo-overlay="true" />

सीएसएस

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

Answer 4

यदि आप पहले से ही jquery का उपयोग कर रहे हैं, तो मैं नहीं देखता कि आप हल्के ओवरले प्लगइन का उपयोग क्यों नहीं कर पाएंगे। अन्य लोगों ने पहले से ही कुछ अच्छे लोगों को jquery में लिखा है, इसलिए पहिया का फिर से आविष्कार क्यों करें?

Comments

कौन सा हल्का ओवरले प्लगइन है?

— अगस्त

जब आप कोड की 3 पंक्तियों में पूरी तरह से स्वीकार्य पहिया बना सकते हैं, तो घंटी और सीटी के साथ एक पहिया क्यों उधार लें? प्लगइन्स हमेशा सबसे अच्छा समाधान नहीं हैं।

— जोएल

कोड की 3 पंक्तियां जो एफएफ में अच्छी तरह से काम कर सकती हैं, लेकिन फिर IE के कुछ संस्करण में quirks हो सकती हैं। कम से कम एक ज्ञात उपकरण के साथ, अधिकांश किंक पहले ही काम कर चुके हैं।

— डैन ब्रीन

यदि आप एक प्लगइन का उपयोग करने का सुझाव देते हैं, तो आपको एक या अधिक सुझाव देना चाहिए जो आपको उपयुक्त लगता है। अन्यथा उत्तर वास्तव में उपयोगी नहीं है ...

— हिनक

@ हिनक - मेरे द्वारा उत्तर दिए जाने के बाद उन्होंने सवाल फिर से उठा दिया। उन्होंने मूल रूप से एक पुस्तकालय का उपयोग किए बिना एक ओवरले के लिए कहा था और मैं यह सुझाव दे रहा था कि यह खरोंच से एक को लागू करने के बजाय एक का उपयोग करने के लिए बहुत अधिक उपरि नहीं था।

— डैन ब्रिन

Answer 5

कृपया इस jQuery प्लगइन की जाँच करें,

blockUI

इसके साथ आप सभी पृष्ठ या तत्वों को ओवरले कर सकते हैं, मेरे लिए बहुत अच्छा काम करते हैं,

उदाहरण: एक div ब्लॉक: $('div.test').block({ message: null });

पृष्ठ को अवरुद्ध करें: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); आशा है कि किसी की मदद करें

अभिवादन

Answer 6

ओवरले से क्या आपका मतलब उस सामग्री से है जो पेज के बाकी हिस्सों को ओवरलैप / कवर करती है? HTML में, आप ऐसा div का उपयोग करके कर सकते हैं जो निरपेक्ष या निश्चित स्थिति का उपयोग करता है। यदि इसे गतिशील रूप से उत्पन्न करने की आवश्यकता है, तो jQuery केवल स्थिति शैली सेट के साथ एक div उत्पन्न कर सकता है।

Answer 7

आप ओवरले के साथ क्या करने का इरादा रखते हैं? यदि यह स्थिर है, तो कहें, एक साधारण बॉक्स कुछ सामग्री को ओवरलैप कर रहा है, बस सीएसएस के साथ पूर्ण स्थिति का उपयोग करें। यदि यह गतिशील है (मेरा मानना ​​है कि इसे एक लाइटबॉक्स कहा जाता है), आप ओवरले-ऑन-डिमांड को दिखाने / छिपाने के लिए कुछ CSS-modifying jQuery कोड लिख सकते हैं।