javascript - 如何得到这种网页效果

Question

1. 小弹出窗口出现在原始页面的中间。

2. 如果没有弹出窗口，原始页面将被灰色阴影覆盖。

3. 下面的原始页面仍然可以上下滚动。

Answer 1

请按照以下步骤操作:

1) 创建这个 CSS 规则:

.overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.5;
  background: #666;
  filter: alpha(opacity=50); /* opacity for IE browsers */ 
}

2) 将此代码添加到您的 jQuery 中:

$("body").prepend("<div class='overlay'></div>");

3) 完成后，像这样删除它:

$(".overlay").remove();

没有对此进行测试，但它应该可以工作(可能需要非常小的修改)。这是一种方法，如果您更喜欢自己做的话。但是，您可以使用现有的解决方案，例如 Twitter 的 Bootstrap 库，它很酷，我推荐它。

http://twitter.github.com/bootstrap/

问候。