ويمكنني أن أضيف تراكب، ولكن أنا لا يمكن إزالته (مسج)

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، وليس هناك أي تراكب، لذلك كنت تقوم بإضافة معالج إلى مجموعة فارغة من العناصر.

ولحل هذه المشكلة، استخدم العيش طريقة لربط معالج لجميع العناصر تلك المباراة #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 تراكب المساعد . سوف تراكب لديك مشغل (عادة ما يكون الزر أو الارتباط)، ولكن يمكنك تحميل أو مسحها مع أمر جافا سكريبت، منها مثلا:

وشبيبة:

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

وأتش تي أم أل:

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