オーバーレイを追加できますが、削除できません（jQuery）

Question

この関数は、次のプロパティを持つオーバーレイをブラウザ画面全体に追加します

$('a.cell').click(function()    {
    $('<div id = "overlay" />').appendTo('body').fadeIn("slow");
});

#overlay
{
background-color: black;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 100;
opacity: 0.5;
}

そして、この関数はそれを削除することになっています。

$('#overlay').click(function()  {
    $(this).fadeOut("slow").remove();
});

しかし、それはまったく何もしないようで、現在、私のページはその上に過度に黒で立ち往生しています。削除の何が問題になっていますか？

Answer 1

問題は、 click ハンドラーを追加するときにオーバーレイがないため、ハンドラーを空の要素セットに追加することです。

これを修正するには、 live メソッドを使用してハンドラーをすべての要素にバインドします作成されるたびに #overlay に一致します。

また、 fadeOut はブロッキング呼び出しではないため、要素のフェードアウトが完了する前に戻ります。したがって、要素がフェードアウトし始める 直後に remove を呼び出しています。

これを修正するには、 fadeOut のコールバックパラメータを使用して、アニメーションの終了後に remove を呼び出します。

例：

$('#overlay').live(function() { 
    $(this).fadeOut("slow", function() { $(this).remove(); });
});

Answer 2

どうぞ。これで問題が修正され、オーバーレイを削除する前にフェードアウトするはずです。

$('#overlay').live("click", function()  {
        $(this).fadeOut("slow", function() { $(this).remove() });
});

Answer 3

削除は、次のようにフェードアウトへのコールバック内にある必要があります。

$('#overlay').live('click', function()  {
    $(this).fadeOut("slow", function() {
       $(this).remove();
    });
});

Answer 4

試してください：

$('#overlay').live('click', function()  {
        $(this).fadeOut("slow").remove();
});

Answer 5

jquery.toolsオーバーレイプラグインを使用することをお勧めします。オーバーレイにはトリガー（通常はボタンまたはリンク）がありますが、javascriptコマンドを使用してロードまたはクリアできます。例：

js：

var config = { closeOnClick:true, mask:{opacity:0.7, color:'#333', loadSpeed:1} }
$("#myTrigger").overlay(config); // add overlay functionality
$("#myTrigger").data("overlay").load(); // make overlay appear
$("#myTrigger").data("overlay").close(); // make overlay disappear

html：

<div id="myOverlay" style="display:none;">Be sure to set width and height css.</div>
<button id="myTrigger" rel="#myOverlay">show overlay</button>