javascript - 像在 facebook 中一样的对话框通知

Question

我正在尝试像 facebook 一样进行通知：当朋友在您的时间轴上发布内容时，页面左下方会显示一个对话框。它淡入，停留 4 秒，然后淡出。

如果有多个对话框，则第二个将显示在前一个对话框的上方，第三个将显示在第二个上方，依此类推。

另外，我没有成功做一个看起来像facebook的对话的对话。

这是我的 jsfiddle：http: //jsfiddle.net/alonshmiel/C7yNs/

html:

<div class="dialog"></div>

javascript:

function dialog(mytext) {
     $(".dialog").text(mytext);
     jQuery(".dialog").dialog({
        autoOpen: true,
        modal: false,
        position: ['left', 'bottom'],
        show: "fade",
        hide: "fade",
        open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                jQuery('.dialog').dialog('close');
            })
        }
    });

    $("#message").fadeTo('slow', 50, function() {
       $("#message").dialog('close');
     });

}

$(document).ready(function() {
    dialog('window1');
    setTimeout(function(){dialog('window2')},3000);    
}); 

这是一个通知的例子。它显示在页面的左下角：

任何帮助表示赞赏！

Answer 1

最后我准备好了:)

http://jsfiddle.net/dimitardanailov/hb7gf/3/

你需要 ：

• 每次创建变量并分配对话框
• 在关闭功能中，您必须删除此对话框。因为 .dialog('close') 只隐藏这个对话框
• 计算并设置最高位置

jQuery

var bottom = 545, top = 0, height = 150;

function dialog(mytext) {
     var myDialog = $('<div/>');
     myDialog.addClass('js-notice');
     myDialog.text(mytext);
     top =  $('.js-notice').length * height;
     myDialog.dialog({
        autoOpen: false,
        modal: false,
        show: "fade",
        hide: "fade",
        open: function(){
            var tempTop = bottom - top;
            if (tempTop < 0) {
                tempTop = 0;
            }
            $(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid red'});
            setTimeout(function()
            {
                myDialog.dialog('close');
            }, 4000);    
        }, 
        close : function() {
            top -= height;
            if (top < 0) {
                top = 0;
            }

            $(this).remove();

            $('.js-notice').each(function(i) {
                var tempTop = bottom - (i * height);
                console.log($('.js-notice').length, tempTop);
                if (tempTop < 0) {
                    tempTop = 0;
                }

                $(this).parent().css({'top' : tempTop + 'px', 'border' : '1px solid green'});
            });
        }
    });

    myDialog.dialog("option", "position", {at: "left bottom"});
    myDialog.dialog('open');
}

$(document).ready(function() {
dialog('window1');
setTimeout(function(){dialog('window2')},3000);    
setTimeout(function(){dialog('window3')},6000);       
});