跨浏览器替代 Webkit /Html 通知

Question

What are cross browser alternative to Webkit /Html Notification preferably in jquery/css. I basically want something that can popup from the bottom right of the page like the webkit notification

Answer 1

Here is a little demo that may give you some ideas...

Demo: http://jsfiddle.net/wdm954/XEHZw/

Basically I'm using a fixed position div to create a small box that slides into view on the page triggered by some event (on click in this example).

Answer 2

function notify(msg, delay) {
    var box = document.createElement('DIV');
    box.id = 'notification';
    // you should just style #notification in css, but w/e
    box.style.position = 'fixed';
    box.style.bottom = '10px';
    box.style.right = '10px';
    box.style.width = '200px';

    box.innerHTML = msg;
    document.body.appendChild(box);
    setTimeout(function() {
        box.parentNode.removeChild(box);
    }, delay);
}

use it like:

notify('sup dude', 1000);

Edit: Jquery Version:

function notifyJquery(msg, delay) {
    $("body").append('<div id="notification" />').css({
        'display': 'none',
        'position': 'fixed',
        'bottom': '10px',
        'right': '10px'
    }).text(msg).fadeIn(400).delay(delay).fadeOut(400);
}

notifyJquery('sup dude', 1000);