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:
$("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 ); });
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?

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
