頁陰影效果：捕捉焦點移出事件

Question

下面是我在想什麼：

當用戶瀏覽其他頁面，或使用不同的應用程序，或者說直不主動與我想的網頁互動把它當作一個事件並觸發一個fadeIn（）函數。僅在這種情況下，我想用陰影填充頁面，一旦用戶回來，陰影就會淡出。

問題是，如何捕獲此事件並執行一個函數？

創建演示here但我希望陰影淡入，當在窗口中觸發mouseout事件時，但如果我這樣做，當我回到身體中時，窗口開始搏動。

Answer 1

這真的很容易。只需在窗口上使用blur和focus事件即可。你可以做任何你想要在回調中顯示/隱藏你的頁面陰影。我個人建議BlockUI plugin。

$(function() 
{ 
    var $body = $('body'); 
    $(window).focus(function() { $body.removeClass('fade'); }) 
      .blur(function() { $body.addClass('fade'); }); 
});? 

工作例如：http://jsbin.com/idipo5/2（在Chrome測試）（事先警告，這真是醜）

---

編輯：我敢這個你要什麼。請注意，如果窗口已被遮蓋但未獲得焦點，它將不會遮罩。如果您確實希望在此情況下取消屏蔽，則可以刪除focused標誌及其檢查。

在Chrome和FF測試（IE是悲慘的一塊未值得-我的時間）：

http://jsbin.com/ufido3

過帳下面的JS代碼，因爲我不知道JSBin能讓你的東西保持多久。

---

$(function() 
{ 
    var $modal = $('#modal'), 
     masked = false, 
     focused = true; 

    function mask() 
    { 
    if (!masked) 
    { 
     $modal.fadeIn('fast'); 
     masked = true; 
    } 
    } 

    function unmask() 
    { 
    if (masked && focused) 
    { 
     $modal.fadeOut('fast'); 
     masked = false; 
    } 
    } 

    $('html').hover(unmask, mask).focus(function (e) 
    { 
    e.stopPropagation(); 
    if ($(e.target).is('html')) unmask(); 
    }).blur(function (e) 
    { 
    e.stopPropagation(); 
    if ($(e.target).is('html')) mask(); 
    }); 

    $(window).focus(function() 
    { 
    focused = true; 
    unmask(); 
    }).blur(function() 
    { 
    focused = false; 
    mask(); 
    }); 
});