Ich habe den folgenden Code auf meiner Seite, und was ich versuche zu tun, ist, dass, wenn ein Benutzer außerhalb der #loginBox klickt, ich möchte, dass das gesamte #loginOverlay ausgeblendet wird. Aber ich kann diesen Effekt nicht erzielen, ohne dass das Ausblenden durch Klicken auf #loginBox ausgelöst wird ...

Es ist am unteren Rand der Seite platziert, und ich habe einen Link auf der Seite, der das Fadein auslöst. Aber das Ausblenden tut sich jetzt ein bisschen schwer.

Ich habe versucht, dies zu tun:

$("#loginOverlay").click(function() { ...fadeout... });

aber es gibt mir das gleiche Ergebnis.

So irgendwelche Vorschläge? Danke im Voraus

<div id="loginOverlay">
    <div id="loginBox">
        <img class="closeBtn" src="images/icons/close.png" alt="" />
        <h3>Login</h3>
        <form action="login.php?ref=index.php" method="post">
            <input type="text" name="username" value="Username..." onblur="if(this.value.length == 0) this.value='Username...';" onclick="if(this.value == 'Username...') this.value='';" />
            <input type="password" name="password" value="Password..." onblur="if(this.value.length == 0) this.value='Password...';" onclick="if(this.value == 'Password...') this.value='';" />
            <input class="loginBtn" type="submit" name="submit" value="Login!" />
        </form>
    </div> <!--login box -->
</div>



<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
    $('#loginOverlay').css('display', 'none');

    $('#loginToggle').click(function() {
        $("#loginOverlay").fadeIn(200);
    });

    $("#loginBox").parent().click(function(){
        $("#loginOverlay").fadeOut(100);
    });

});