0

在此处输入图像描述

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

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

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

4

5 回答 5

3

按着这些次序：

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/

问候。

于 2013-01-08T22:25:54.123 回答
2

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

于 2013-01-08T22:21:57.473 回答
2

这很容易通过一些简单的 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 如何将这些DIVs 设置为display: none. 它们在被调用之前是隐藏的，这是通过将它们设置为 来完成的display: block。

这些天来，我发现依靠 jQuery UI 出色的对话框小部件要简单得多，也更加健壮。

于 2013-01-08T22:32:29.413 回答
1

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

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

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

-moz-opacity: 0.8;
opacity:.80;
于 2013-01-08T22:21:32.713 回答
0

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

于 2013-01-08T22:24:01.163 回答