jQuery Mobile，透明黑色叠加效果答案

【问题标题】：jQuery Mobile, transparent black overlay effectjQuery Mobile，透明黑色叠加效果
【发布时间】：2012-05-06 16:09:41
【问题描述】：

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

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

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

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

【问题讨论】：

完全取决于你的页面是如何布局的，但基本上你想在文档中附加一个 div，设置它的样式以使其符合你的标准（半透明，位于内容上方但低于导航栏），然后有条件地显示/隐藏它。您发布的代码中唯一缺少的行是$('#my-div').show()。剩下的就是 CSS。

【解决方案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 问题。 ;-)

【讨论】：