Dialog notification like in the facebook

Question

I am trying to do a notification like the facebook: when a friend posted something on your timeline, a dialog is displayed in the left bottom of the page. it fades in, stay 4 seconds and then fades out.

if there are more then one dialog, the second will displayed above the previous one, the third above the second, etc..

In addition, I didn't succeed to do a dialog that seems like the dialog of facebook.

this is my 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);    
}); 

and this is an example for a notification. it is displayed in the left bottom of the page:

any help appreciated!

Answer 1

Finaly i am ready :)

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

You need :

• Create variable and asign dialog every time
• In close function you must to delete this dialog. Because .dialog('close') only hide this dialog
• Calculate and set top position

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);       
});