jQuery：我如何創建一個簡單的覆蓋？

Question

如何在沒有UI的jQuery中創建一個真正基本的覆蓋圖？

什麼是輕量級插件？

Answer 1

覆蓋是，簡單地說，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。閱讀更多關於他的調查結果的評論..

Answer 2

如果你已經在使用jquery，我不明白你爲什麼不能使用輕量級的overlay插件。其他人已經寫了一些很好的jquery，所以爲什麼重新發明輪子？

Answer 3

通過疊加你是指重疊/覆蓋頁面的其餘部分的內容？在HTML中，你可以通過使用絕對定位或固定定位的div來實現。如果需要動態生成，jQuery可以簡單地生成適當位置樣式的div。

Answer 4

你打算如何處理疊加層？如果它是靜態的，比如說一個重疊一些內容的簡單框，那麼就使用絕對定位與CSS。如果它是動態的（我相信這被稱爲一個燈箱），你可以寫一些CSS修改jQuery代碼來顯示/隱藏覆蓋按需。

Answer 5

這是一個完全封裝的版本，它向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; 
} 

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

Answer 6

下面是一個簡單的JavaScript唯一的解決辦法

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