[JavaScript] jQuery i "warstwy" przy kliknięciu Opcje

[-lukasamd-]

Witam,
mam 3 warstwy-divy:
- container
- effect (dla efektów, zaciemniania itp, poza tym stanowi niejako "kontener" dla komunikatów)
- newsletter (tu przedstawiony div-komunikat)

No i taki kod:

[PHP] pobierz, plaintext 
 
	$("a.newsletter").toggle(function()
	{
    $("#container").animate({ 
      opacity: 0.3
    }, 750 );
    $("#effect").fadeIn("medium");
 
    $("#effect").live('click', function()
    {
      $("#effect").fadeOut("medium");
      $("#container").animate({ 
        opacity: 1.0
      }, 750 );
    });
  },function()
	{
    $("#effect").fadeOut("medium");
    $("#container").animate({ 
      opacity: 1.0
    }, 750 );
  });
[PHP] pobierz, plaintext 

Po kliknięciu wszystko jest ok, strona przyciemniona, pokazuje się okienko.
Gdy klikam gdziekolwiek, zgodnie z założeniami wszystko "wraca do normy". Niestety, również kliknięcie na coś w div#newsletter powoduje taką akcję - zupełnie jakby wyższy priorytet miał div#effect (w sumie logiczne, jest wyżej w DOM).

Jak zrobić, aby reagowało na klik tylko poza div#newsletter, a jego zostawiło w spokoju?
Poza tym, jak widać, powtarza się kod dla toogle i dla tego kliknięcia gdziekolwiek. Da się to jakoś sensownie zrobić "w imię zasady" DRY? (IMG:style_emoticons/default/smile.gif)

Myślałem nawet o zaprzęgnięciu jQuery UI, ale taki kombajn nie jest mi potrzebny do 1 komunikatu na stronie, a poza tym lepiej jak człowiek napisze i sam się czegoś nauczy (IMG:style_emoticons/default/smile.gif)

Ten post edytował lukasamd 5.08.2010, 11:55:47