Make Notification Div Fade Out When User Click Anywhere Outside The Notification Div
<p>I'm making website that have notification 'button'. When user click this button, notification div will appear at the bottom of the button.</p>

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

<p>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.</p>

<p>but, i don't know how to make it fade out when user click anywhere outside the notification div.</p>

<p>Can anyone help me?</p>

<p>Here is my code that i've made:</p>

<pre><code>&lt;div id="notifikasi" style="position:relative; cursor:pointer"&gt;Notification&lt;sup style="padding: 2px 4px 2px 4px; background: red"&gt;&lt;/sup&gt;
    &lt;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"&gt;
        &lt;ul&gt;
            &lt;li&gt;Some Notification&lt;/li&gt;
            &lt;li&gt;Some Notification&lt;/li&gt;
            &lt;li&gt;Some Notification&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;

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