javascript - jQuery Mobile，透明黑色叠加效果

Question

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

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

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

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

score 2 · Accepted Answer

我同意 meagar（谁应该让他的评论成为一个答案，以便它可以被接受！）但还要补充一点，如果您不希望覆盖 div 始终存在（但只是隐藏），您可以即时添加它反而：

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

（#content代表您碰巧称呼您的内容包装器.overlay的任何名称，并且是我碰巧为我选择的名称；很容易更改！）

每当 Ajax 完成回调触发时（这也是.hide()meagar 建议中使用的地方），只需使用以下命令再次打开它：

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

剩下的就是 CSS。

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

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

1 回答 1