javascript - Quickbox 与 MooTools 1.4

Question

我一直在使用 MooTools 1.4 为我的网站尝试一些灯箱，我发现这个可以工作并且看起来非常不错(易于实现):

http://andrewplummer.com/code/quickbox/

在演示网站上，灯箱工作正常，单击图像会显示叠加层和图像，单击叠加层会将它们删除。

在我的网站上，当您单击适当标记的图像时，灯箱会弹出，一切正常，但是，当您通过单击覆盖层或按 q/x/esc 退出灯箱时，覆盖层会隐藏，所有内容都会显示伟大的。唯一的问题是，由于某种原因，它被嵌入到我的代码正文中:

<div id="qbOverlay" style="display: block; width: 100%; height: 100%; opacity: 0; "></div>

这导致的问题是，灯箱关闭后它不会被删除，因此整个页面都为空白

#qbOverlay {
    display: block;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    cursor: pointer;
 }

这是一个问题，因为这会使页面的整个顶部成为覆盖层，并且在灯箱关闭后它永远不会被删除。当这样时，我无法单击任何链接或使用其覆盖区域中的任何输入框。

我有一种感觉，导致这个问题的原因是这样的:

close: function(){
    this.quickBox.setStyle("display", "none");
    this.quickBox.setStyle("cursor", "auto");
    this.overlay.fade("out");
    this.active = false;
}

我尝试过使用兼容模式的 MooTools 并打开所有额外功能，但没有成功。

Answer 1

这是 mootools 1.4 中的一个实际错误 https://github.com/mootools/mootools-core/issues/2074

它将于本周在 1.4.1 中修复(希望)，但您可以在此处获取更新的 Fx.tween 元素快捷原型(prototype)代码以进行淡入淡出: https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098

或者，在不透明度上使用简单的补间而不是.fade()，据称它可以工作。您还可以对覆盖层进行破坏，这对我来说是最好的解决办法