2011-06-03 61 views
1

什麼是交叉瀏覽器替代Webkit/Html通知最好在jQuery/CSS。基本上,我想要的東西,可以從頁面的像WebKit的通知跨瀏覽器替代Webkit/Html通知

+1

從頁面的右下角或從桌面的右下角?而你實際上正在討論HTML5通知,就像[這個問題](http://stackoverflow.com/q/3003857/258127)中所描述的那樣? – 2011-06-03 18:06:42

+0

我的意思是頁面/瀏覽器的右下角。我不認爲第二個是可能的 – aWebDeveloper 2011-06-03 18:16:49

回答

1

這裏一個小演示,可能會給你一些想法...

演示:http://jsfiddle.net/wdm954/XEHZw/

基本上我使用的是fixed的位置div來創建一個小框,在某個事件觸發的頁面上滑入視圖(在此示例中單擊)。

+0

「類似咆哮」的解決方案的問題在於,當用戶使用另一個(可能是桌面)工具時,他們僅在第二個平面中顯示瀏覽器的真實用處時才顯示在頁面內部並有非侵入性的通知 – 2012-06-26 21:10:52

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

使用右下角彈出它想:

notify('sup dude', 1000); 

編輯:jQuery的版本:

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