页面阴影效果:捕捉焦点事件

blur 和 focus BlockUI plugin .

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

工作示例: http://jsbin.com/idipo5/2 (铬测试)(预先警告,它真的很难看)

编辑: 我很清楚你的目的。请注意,如果窗口被鼠标移过但没有焦点,它是如何不取消遮罩的。如果您确实想在这种情况下解除它的掩码,您可以删除 focused 标志及其检查。

在铬和FF中测试 (这是一块不值得我花时间的可怜的石头)

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