灰盒Redux

发布于 2006年2月10日作者 John Resig

今天又出现了一个流行的DOM/CSS/Javascript项目：灰盒。它非常类似于流行的灯箱，但用于在当前页面上显示网站。

我认为这是一个很好的机会来展示使用jQuery编写出色代码的便捷性。我分两个阶段修改了灰盒。

第一步是使灰盒以无侵入的方式工作（他们将javascript嵌入到页面中以使其工作），并修复损坏的返回按钮（在访问网站后，您必须两次单击返回按钮）。
下一步是彻底改造库本身，并消除对Amir个人Javascript库的依赖，使其完全使用jQuery运行。最终的代码只有约1.2kb（而原始代码为12kb）。

A演示和下载如果您有兴趣查看更多jQuery在实际应用中的示例，可以点击以上链接。尽情享受！

关于“灰盒Redux”的39个想法

Alain Ravet 于 2006年2月11日凌晨4:01 说：

这看起来像是为网站添加小型相关教程的简单方法：添加一个“帮助”按钮，并使其在一个灰盒中显示一个页面的序列。

很棒。
Andrea 于 2006年2月11日凌晨5:17 说：

我刚注意到原始灰盒中的返回按钮已损坏，你就提出了这个解决方案。

我印象深刻。

一个问题。作为一般规则，您是否更倾向于使用 e.preventDefault() 而不是返回 false（我知道这也会取消事件的冒泡），在 $(“a.greybox”).click() 中？我相信这将确保您不会破坏页面上依赖于 $(“body”).click() 的其他行为，或者是我遗漏了什么？

这就是我使用jQuery的事件处理的方式，我想知道您选择取消所有后续事件处理而不是仅取消默认执行是否有任何特定原因。

再次致敬，jQuery是我第一个无法抗拒用于实际工作的js库。使用JS的速度快了很多，代码也变得更具自我文档性和易于审查。
Alain Ravet 于 2006年2月11日上午8:44 说：

如果存在Prototype - 1.4 -，它将无法正常工作。
John Resig 于 2006年2月11日中午12:14 说：
Alain 您有使用这两个库一起运行的示例页面吗？我想看看问题是什么。

Andrea 我可能应该将preventDefault显式化，但我很难决定是否应该这样做。我发现，大多数情况下，我可以使用preventDefault，并且它可以按我想要的方式继续工作。我认为最好的例子是
```
$("a").click(function(e){
  alert("hello!");
  e.preventDefault();
  return false;
});
```
一些非常简单的代码变得很长，难以理解。一定有更好的解决方案。请告诉我您对此的看法，因为这显然仍然是一个令人困惑的问题。
Andrea 于 2006年2月11日下午1:30 说：
从“基本事件”文档中，我了解到如果您的事件处理代码也返回 false，则编写 e.preventDefault() 是多余的，因此对我来说，替代方案似乎是以下两种

1. 使用事件参数 (e) 并以 e.preventDefault(); 结束例程。

2. 仅返回 false;

版本2非常简单，但会阻止祖先元素处理点击事件，可能会干扰其他正在运行的脚本。

为了使代码既只做必要的事情，又更容易被想要查找示例的访问者理解，您可能应该使用更具解释性的参数名称和简短的注释
```
$("a").click(function(clickEvent){
  alert("Hi There!");
  clickEvent.preventDefault(); // don't follow the link
});
```
但这只是一个细节......
Alain Ravet 于 2006年2月11日下午6:45 说：

John,
>> 与 prototype 不兼容
>您有示例页面吗？

易于重现
1/ 在 , 添加 prototype.js
2/ 在 test.html 中，在 ... greybox.js 后添加“”

问题：当您单击时，不再出现灰盒，而是一个标准链接。

注意：在 Mac 上测试
Brendyn 于 2006年2月12日下午6:49 说：

Andrea & John,

只是为了让您了解，我之前不理解您所说的 preventDefault() 的确切含义，直到我读了 Andrea 的帖子及其相关评论。通过 Andrea 编写的一段代码片段来展示，它以更明确的方式解释了该函数的作用，这非常有道理。
Corey Jewett 于 2006年2月20日下午7:16 说：

关于 Alain 的笔记（“与 Prototype 不兼容”），以下是来自 FF 1.5 的一些 JS 控制台内容

注意，我唯一更改的是添加了 Prototype 导入，并本地拉取了 jQuery

加载时
=====
错误：$ 未定义
源文件：http://cirqe/js/jquery.js
行：18

单击时
=====
错误：预期选择器。由于选择器错误，规则集被忽略。
源文件：http://www.google.com/
行：5
错误：在搜索无效规则集的结束 } 时遇到意外的文件结束。
源文件：http://www.google.com/
行：6
Allan 于 2006年2月28日下午6:30 说：

是我有问题还是这个脚本有问题？

我在 FireFox 1.0.7 中遇到了“TypeError: o.SetAttribute 不是函数”错误。

在 IE 6 中可以正常工作，但动画很奇怪，每个窗口都有垂直和水平滚动条。

WinXP pro sp2

这个脚本需要更多改进。

继续努力！
John Resig 于 2006年2月28日下午7:08 说：

Allan: 对不起，出现了错误，这是因为我昨晚将一个修复程序加入了代码中。我已经修复了它，并将代码推送到线上。对由此带来的不便，我深感歉意。
Amir 于 2006年3月12日凌晨5:35 说：

哇，干得漂亮！

致敬
amix
Dwaine 于 2006年4月28日上午8:39 说：

太棒了！干得好。

它在 Safari 中似乎存在问题？它没有弹出灰盒，而是直接跳转到网页。是我的操作有误，还是它不支持 Safari？

太棒了！
Rydal Williams 于 2006年5月12日上午10:34 说：

即使我下载了相同的文件集，也无法使其正常工作，我得到的是半生不熟的项目——div 并没有完全覆盖页面，它看起来像是页面顶部的一个 40px 的水平 div。此外，它有时会直接跳转到页面——我使用的是 IE 6。
matt 于 2006 年 5 月 21 日凌晨 3:30 说：

这项工作很棒！我对 jQuery 的轻量级印象深刻。

这将是我正在开发的一个项目的完美解决方案，除了有一点：如果可以将脚本设置成这样，以便框内的所有链接（甚至框内的特定链接）都可以在主浏览器窗口中打开，而不是在灰框中打开，那就太好了。

有人对此有什么建议吗？
Justin 于 2006 年 7 月 29 日凌晨 5:13 说：

嗨，

代码很棒，

只有一个问题，当我在一个一屏网页中有一个灰框链接时，一切正常，但是当我在一个页面向下滚动三屏时——一旦按下链接，屏幕上什么也不会发生，直到你滚动回到页面的顶部——页面的顶部显示了灰框窗口，显示了链接页面，屏幕的其余部分被灰化——就像只有页面顶部的“屏幕”部分被“灰框化”了。

有人知道解决方法吗？

干杯

Justin
Tom Zellman 于 2006 年 8 月 6 日下午 2:54 说：

关于 Justin 上面的评论，我有一些更改可以用来让框居中在屏幕上，并且即使在窗口滚动事件中也保持居中。

在 $(window).resize(GB_position); 之后添加：

$(window).scroll(GB_position);

将 GB_position 更改为

function GB_position()
{
var de = document.documentElement;
var h = self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
var w = self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
var iebody=(document.compatMode && document.compatMode != “BackCompat”)? document.documentElement : document.body;
var dsocleft=document.all? iebody.scrollLeft : pageXOffset;
var dsoctop=document.all? iebody.scrollTop : pageYOffset;

var height = h

我希望所有格式都正确。

-Tom
Tom Zellman 于 2006 年 8 月 6 日下午 2:59 说：

看起来格式不太好。你可以从这里下载更新后的 greybox.js 文件：http://swampfoot.googlepages.com/greybox.js

唯一的更改是更新的 GB_position 函数和监听窗口滚动事件。

-Tom
Justin 于 2006 年 8 月 10 日晚上 11:32 说：

谢谢汤姆。

刚刚测试了新版本，它现在可以很好地与多屏页面一起使用 (https://jqueryjs.cn/blog/2006/02/10/greybox-redux/#comment-1030)

干杯

Justin
Justin 于 2006 年 10 月 10 日凌晨 6:27 说：

嗨，

是否可以链接到特定页面内的某个位置，我尝试使用 (见下文) 并链接到该位置，但它似乎不起作用。它只是打开页面的顶部，而不是它应该打开的地方

例如
灰框链接
 注意

它链接到此页面的中间
升级信息

干杯

Justin
Justin 于 2006 年 10 月 11 日凌晨 5:31 说：

抱歉，帖子没有按我的意思表达

1. 在你的网页中，有一个灰框的“a href”指向目标文件中间的“a name”，并让灰框指向该“a name”。

希望这说得通

干杯

Justin
z3phir 于 2006 年 10 月 19 日凌晨 4:29 说：

它从链接中运行得很好，但是如何从表单中调用灰框 redux（在提交时以灰框 redux 打开页面）？
Mihai 于 2006 年 10 月 31 日凌晨 7:10 说：

大家好，

这个 js 看起来像是一颗很棒的宝石。

我在使用它时遇到问题。

如果我把它放在 `<body>` 标签之后作为第一个元素，它会运行正常。

但是，如果我把它放在我想要它显示的位置，它就不能运行。

这个位置是在以下 DIV 打开之后（它们都在灰框关闭之后关闭）

我应该如何格式化下面的第三行

var GB_ANIMATION = true;
$(document).ready(function(){
$(“a.greybox”).click(function(){
var t = this.title || $(this).text() || this.href;
GB_show(t,this.href,590,765);
return false;
});
});

我已经尝试了

$(“#main .column a.greybox”).click(function(){

但它不起作用

继续努力

非常感谢，
Mihai
Phil Oye 于 2006 年 11 月 9 日下午 7:16 说：

很棒的简单插件！

有人知道如何移除灰框底部的空白（水平滚动条下方）吗？在 GB_position 中，我看到它从 iframe 高度中减去了 32 个像素。这似乎导致了间隙，但如果你将值更改为零，你会得到两个滚动条。

有什么想法吗？
hubrik 于 2007 年 1 月 15 日晚上 8:08 说：

在 Firefox 中，我得到两个垂直滚动条。在 IE 中，我必须向右滚动才能得到第二个滚动条，我需要它来向下滚动页面。我已经查看了你的演示，你似乎也遇到了同样的问题。
r 于 2007 年 2 月 9 日下午 5:15 说：

我想让灰框 redux 在 body 加载时启动……

我该如何操作？
Jon 于 2007 年 4 月 8 日下午 5:42 说：

我是不是遗漏了什么，或者这个脚本不允许动态调整大小？如果我想在图片库中使用它，而且不是所有图片都相同大小，如果它不能自动检测图片大小，也许它可以让我们在锚标记本身中手动指定大小？

我本来已经准备好在我的乐队网站上使用这个脚本，但是这种一刀切的限制让我不得不转向 lightbox/thickbox。:-(
Brad 于 2007 年 6 月 26 日晚上 9:22 说：

如果你想添加一个加载图像，并在 iframe 加载后隐藏它，只需将 `document.body.append` 更改为以下内容

$(document.body)
.append(“” +
“” +
“”);

然后在你的 iframe 中，当文档加载时隐藏加载图像

$(document).ready(function() {
parent.parent.$(‘#GB_loader’).hide();
});

希望所有内容都粘贴得很好 :)
Brad 于 2007 年 6 月 26 日晚上 9:29 说：

显然它没有……认为评论板需要一些 htmlentities 的帮助 :)

无论如何，它并不太难，但如果你需要加载动画的代码，请给我发送电子邮件 isawufall@yahoo
Shanti 于 2007 年 8 月 4 日晚上 11:28 说：

有没有办法让当我打开一个 Greybox 窗口（一个单页，就像一张图片）时，点击浏览器的后退按钮实际上会关闭 Greybox 窗口，而不是返回上一页？
lena on 2007 年 10 月 8 日下午 2:11 said:

嗨，

我希望窗口可以移动，并解决两个滚动条问题（两个垂直滚动条）。

谢谢。
Stephen on 2007 年 10 月 25 日上午 9:11 said:

我对 Greybox 有两个问题，希望有人能帮帮我。

1) 如果页面需要垂直滚动，因为内容太多，然后在页面“下方”的链接上启动 Greybox 不会覆盖整个页面，并将盒子本身放置在“第一页”上……这种行为在 IE7 和 FF2 上都是一样的……例如，可以看看 (http://www.morningz.com/linked/greybox/test.htm)，滚动到底部并点击点击。

2) 在 Firefox 中，“关闭窗口”链接不起作用，就像我的某个标题区域“位于”它和覆盖层之上，但我的现有代码/css 中没有设置 z-index。

提前感谢。
Stephen on 2007 年 10 月 25 日上午 9:47 said:

Oops... 我误读了 Tom Zellman 发布的修复程序……它解决了 #1……仍然在 CSS 中寻找解决 #2 在 FF 中的行为问题。
luc on 2007 年 11 月 29 日上午 1:22 said:

有人知道如何防止通过按下 Esc 键或点击盒子外部来关闭盒子吗？

谢谢。
Josh Anderson - Transparent Website Video Player on 2008 年 3 月 23 日上午 4:34 said:

我在 Greybox Redux 中显示 Flash 视频，并使用“更新的 greybox.js 文件，位于：http://swampfoot.googlepages.com/greybox.js”……

我有一个需要人帮忙的问题……

当我关闭模式窗口时，Flash 视频会继续播放，即使它不再可见……

但是，如果我使用另一个名为“videoBox”的模式脚本，它就不会出现这个问题。

有什么建议吗？
BOS on 2008 年 5 月 9 日下午 5:18 said:

大家好，我对 jQuery 还比较陌生，正在努力学习更多知识。

我写了一个名为 GetComments() 的函数，它使用 $.get() 来检索在 Greybox 窗口中输入的数据。

在 Greybox 窗口关闭后，调用函数的最佳方法是什么？

我修改了 greybox.js 如下所示：

function GB_hide() {
$(“#GB_window,#GB_overlay”).hide();
GetComments(); //
Rob Q on 2008 年 7 月 23 日上午 11:48 said:

Tom Zellman 的盒子位置修复程序似乎在 FF 3 发布版中不起作用。我很想使用它。
Rob Q on 2008 年 7 月 24 日上午 1:11 said:

还有一件事，如果你想从 iframe 内部自动关闭弹出窗口（例如在表单提交后），而不必点击外部或点击关闭按钮，应该怎么做呢？
ranfow on 2008 年 9 月 19 日上午 12:13 said:

和 Rob Q 一样的问题，如何通过函数关闭 Greybox？例如，我在 Greybox 中登录后，想在不点击鼠标的情况下关闭它，该怎么做？
Pez on 2008 年 10 月 21 日下午 3:12 said:

Rob Q 和 ranfrow，如果在成功输入表单（或其他任何操作）后，将脚本重定向到包含此代码的另一个页面，窗口将关闭，用户将被重定向到您希望他们去的页面。

$(document).ready(function(){
top.location.href=”http://www.yourpagehere.com”;
}

显然，您还需要包含 jQuery。我想您也可以在 onload 中执行此操作，但内联 JavaScript 是邪恶的，不是吗？

希望这有帮助 :)

官方jQuery博客

灰盒Redux

关于“灰盒Redux”的39个想法