Question

enter image description here

小弹出窗口出现在原始页面的中间。
如果没有弹出窗口，原始页面会被灰色阴影覆盖。
下面的原始页面仍然可以上下滚动。

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 lib，这很酷，我推荐它。

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

问候。

Answer 2

您可以使用JQueryUI对话框小部件http://jqueryui.com/dialog/#modal

Answer 3

这很容易实现一些简单的CSS ...

叠加层（灰色背景）固定到位并覆盖以下所有内容：

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0;
    filter: alpha(opacity=0);
    z-index: 2; // above content
}

“对话框”本身的风格相似，但更小：

#dialog {
    display: none;
    position: fixed;
    width: 500px;
    height: 250px;
    background-color: #fff;
    z-index: 3; // above 'overlay'
}

可以使用简单的JavaScript计算top和left属性，以便可以将对话框置于浏览器的中心位置：

positionDialog = function() {
    if (typeof window.innerHeight != 'undefined') {
        dialog.top = parseInt(window.innerHeight / 2) - dialog.height;
        dialog.left = parseInt(window.innerWidth / 2) - dialog.height;
    }
}

并且在窗口调整大小时：

$(window).resize(function() {
    positionDialog();
}

注意CSS如何将这些DIV设置为display: none。它们在被调用之前是隐藏的，这可以通过将它们设置为display: block来完成。

现在，我发现依靠jQuery UI的优秀dialog widget更简单，更健壮。

Answer 4

它被称为灯箱。有一种方法可以只使用CSS：

http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

使背景变暗的关键是用于覆盖背景的框的CSS opacity属性，您可以设置黑色背景并将此CSS用于透明度：

-moz-opacity: 0.8;
opacity:.80;

Answer 5

您可以查看Twitter Bootstrap中包含的模式：http://twitter.github.com/bootstrap/javascript.html#modals

如何获得这种网页效果

5 个答案: