覆蓋層與jQuery

我想創建一個覆蓋層，將覆蓋我的屏幕完全與半透明層單擊元素時。我很努力地將它附加到文檔中：覆蓋層與jQuery

#overlay { 
    background-image: url(../overlay.png); 
    opacity: 0.5; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1000; 
} 

$("#getOverlay").click(function() { 
    var overlay = $('<div id="overlay">'); 
    $('body').append(overlay); 
});

如果我只是放置在我的文檔中，該工作正常。由於某種原因，在點擊時獲得它是一個問題。

更新：

我剛意識到我下IE標籤（FF插件）測試它模仿IE的較舊版本。 FF和IE9按預期行事。舊的IE顯然不能識別透明度，所以我修改了CSS：

#overlay { 
    background-image: url(../overlay.png); 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 12000; 
}

謝謝大家的反饋！

來源

2011-03-29 santa

[適用於我]（http://jsfiddle.net/hJqGP/）（圖片替換爲顏色，因爲我無法訪問您的圖片）。你確定你的點擊處理程序被綁定嗎？ – justkt 2011-03-29 18:15:25

您是否在禁用了擴展和插件的多個瀏覽器中檢查它？ – 2011-03-29 18:19:24

觸發疊加層的按鈕是動態注入到DOM還是在頁面加載時出現？ – Mark 2011-03-29 18:21:29

它爲我在這的jsfiddle：

來源

2011-03-29 18:18:00 Craig

試試這個：

$("#getOverlay").click(function() { 
    var overlay = $('<div>'); 
    overlay.addClass('overlay'); 
    $('body').append(overlay); 
});

如果$("#getOverlay")是不那裏DOM負荷試：

$("#getOverlay").live('click',function(){...

和CSS的第一行更改爲：

.overlay {

see working DEMO here

來源

2011-03-29 18:15:22 Neal

您應該直接添加覆蓋到HTML一樣<div id="overlay"></div>，加display: none的CSS定義，然後在上單擊處理程序，做到$('#overlay').show()。否則，每次單擊元素時，都會爲其添加一個新的div。

來源

2011-03-29 18:18:15 CarlosZ

沒關係，我可以稍後刪除它，不是嗎？我想我可以使用remove（） – santa 2011-03-29 18:28:58

我想，這是一種不必要的資源使用，儘管非常小 – CarlosZ 2011-03-29 18:34:16

覆蓋層與jQuery

回答

相關問題