Question

我目前正在使用jQuery Mobile进行Phonegap应用程序，我想知道如何添加仅对页面内容半透明的黑色叠加层。我不希望它覆盖顶部和底部导航栏。当我向服务器发出AJAX调用时会发生这种情况。

当您在搜索栏中输入内容时，此效果类似于Twitter iOS应用程序。

$('#search').ajaxStart(function() {
  // what do I put here?
});

感谢大家的帮助！非常感谢。

Answer 1

我同意meagar（谁应该将他的评论作为答案，以便可以接受！）但是如果你不希望叠加div始终存在（但只是隐藏），你也可以添加它而是在飞行中：

$('#search').ajaxStart(function() {
  $('#content').wrap('<div class="overlay" />');
});

（#content表示您调用内容包装器时发生的任何事情，.overlay是我为我选择的名称;很容易更改！）

每当Ajax完成回调触发时（也会在meagar的建议中使用.hide()），只需再次打开它：

$('#content').unwrap();

其余的是CSS。

.overlay { 
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,0.7);
}

请记住......这可能不是正确的CSS方法，具体取决于页面上已有的内容。基本的想法是，你希望它只跨越你的内容区域，但有陷阱！浮动，一些东西的绝对定位...所有密谋使你的叠加不仅覆盖内容区域。如果你遇到这个问题，那么这是一个单独的SO问题。 ; - ）