当用户点击Notification Div之外的任何地方时,通知Div会消失

时间:2012-08-07 16:55:55

标签: javascript jquery

我正在制作有通知'按钮的网站。当用户单击此按钮时,通知div将出现在按钮的底部。

我想让它的行为像facebook中的notifacation。当用户点击通知div元素之外的任何地方时,通知将消失。

到目前为止,当点击通知按钮时,我已成功通知淡入淡出和淡出。我正在使用jquery来做这件事。

但是,当用户点击通知div之外的任何地方时,我不知道如何让它淡出。

任何人都可以帮助我吗?

以下是我的代码:

<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>

3 个答案:

答案 0 :(得分:4)

试试这个:

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

答案 1 :(得分:2)

怎么样:

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).one('click', function(e) {
            $('#theNotif').fadeOut('fast');
        });
    });
});

// prevent triggering when clicking the actual notification
$('#theNotif').click(function() { return false; });​

Demo

通知已经淡入,只有一次性的点击监听器将添加到文档中,听取任何点击。


修改

我自己就这样玩了一下,我得出的结论是.one在这里并不像我最初想象的那样有用,因为它需要一些其他的解决方法。我之所以使用它,是因为我不得不经常收听每一个文档点击,只是为了覆盖通知开放的场景。

我决定采用更简洁的方法来使用绑定和取消绑定。

function closeNotification(e) {
   if($(e.target).closest('#theNotif').length > 0) {
      // notification or child of notification was clicked; ignore
      return;
   }

   $('#theNotif').fadeOut('fast');
   $(document).unbind('click', closeNotification);
};

$('#notifikasi').click(function(){
    $('#theNotif').fadeIn('fast', function() {
        $(document).bind('click', closeNotification);
    });
});

Demo

上面的代码在概念上与原始代码非常相似。淡入后,在文档中注册了一个单击侦听器。这一次,在文档点击监听器中进行检查,以查看被点击的元素是#theNotif还是#theNotif的子元素,在这种情况下,关闭函数立即退出

否则,它会继续关闭通知,然后立即取消绑定侦听器。

请注意,您必须使用命名函数,而不是在jQuery中使用的匿名内联函数,以便能够正确解除绑定。

答案 2 :(得分:0)

当鼠标移过notifikasi(比如a = 1)时设置变量,当移动到外面时取消设置。 同样适用于诺蒂夫。 现在

$(document).click(function(){
    if(a == 0){
        if($('#theNotif').css('display') == 'block' || $('#theNotif').css('display') == ''){
            $('#theNotif').fadeOut('fast');
        }
    }
});