Question

我一直在使用MooTools 1.4为我的网站试用几个灯箱，我发现这个灯箱工作起来非常好（易于实现）：

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

在我的网站上，当您点击标记得当的图像时，灯箱会弹出并且一切正常，但是，当您通过单击叠加层或按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元素快捷方式原型代码： https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098

或者，在不透明度而不是.fade()上使用简单的补间，据称它可以正常工作。你也可以在叠加层上进行破坏，这对我来说是最好的解决方法

带有MooTools 1.4的Quickbox

1 个答案: