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

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

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

।

उम्मीद है कि यह मदद करता है!

संपादित करें: @Vitaly के रूप में इसे अच्छी तरह से रखें, अपने डॉक्टर टाइप को जांचना सुनिश्चित करें। अपने निष्कर्षों पर टिप्पणी पर और अधिक पढ़ें ..

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

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 6

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

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