Question

I’m making website that have notification ‘button’. When user click this button, notification div will appear at the bottom of the button.

I want to make its behaviour like notifacation in facebook. the notification will disappear when user click anywhere outside the notification div element.

So far, i’ve succeed to make the notification div to fade in and fade out when the notification button clicked. i’m using jquery to do this.

but, i don’t know how to make it fade out when user click anywhere outside the notification div.

Can anyone help me?

Here is my code that i’ve made:

<div id="notifikasi" style="position:relative; cursor:pointer">Notification<sup style="padding: 2px 4px 2px 4px; background: red"></sup>
    <div id="theNotif" style="position: absolute; top: 20px; left: 0px; background: #fff; color: #000; border: solid 1px #999; z-index: 999; padding: 10px 20px 10px 0px; width:200px; display:none">
        <ul>
            <li>Some Notification</li>
            <li>Some Notification</li>
            <li>Some Notification</li>
        </ul>
    </div>
</div>

<script>
$('#notifikasi').click(function(){
    if($('#theNotif').css('display') == 'none'){
        $('#theNotif').fadeIn('fast');
    }
    else{
        $('#theNotif').fadeOut('fast');
    }
});
</script>

Answer 1

Try this:

$(document).mouseup(function (e)
{
    var myDiv = $("#theNotif");
    if (myDiv.has(e.target).length === 0)
        myDiv.hide();
});