2

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

$('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();
});

しかし、それはまったく何もしていないようで、今私のページは黒く塗りつぶされています。削除の何が問題になっていますか？

4

5 に答える 5

9

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

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

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

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

例えば：

$('#overlay').live(function() { 
    $(this).fadeOut("slow", function() { $(this).remove(); });
});
于 2009-10-27T21:30:40.290 に答える
3

どうぞ。これで問題が解決し、オーバーレイを削除する前にフェードアウトさせることができます。

$('#overlay').live("click", function()  {
        $(this).fadeOut("slow", function() { $(this).remove() });
});
于 2009-10-27T21:32:32.300 に答える
2

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

$('#overlay').live('click', function()  {
    $(this).fadeOut("slow", function() {
       $(this).remove();
    });
});
于 2009-10-27T21:31:17.763 に答える
1

試す：

$('#overlay').live('click', function()  {
        $(this).fadeOut("slow").remove();
});
于 2009-10-27T21:27:40.483 に答える
0

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>
于 2012-04-25T16:38:10.813 に答える