Quickbox 与 MooTools 1.4

发布于 2024-12-06 12:41:17 字数 1062 浏览 1 评论 0原文

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

在演示网站上，灯箱工作完美，单击图像会弹出叠加层和图像，单击叠加层会删除他们。

在我的网站上，当您单击适当标记的图像时，灯箱会弹出，一切正常，但是，当您通过单击叠加层或按 q/x/esc 退出灯箱时，叠加层会隐藏，一切看起来都很棒。唯一的问题是，由于某种原因，它被嵌入到我的代码正文中：

这导致的问题是，灯箱关闭后它不会被删除，所以整个页面在

#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 的兼容模式并打开所有额外功能，但没有运气。

原文

I've been trying out a few lightboxes for my website using MooTools 1.4, and I found this one that works and looks really nice (with easy implementation):

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

On the demo website, the lightbox works perfectly, clicking the image brings up the overlay and image, and clicking the overlay removes them.

On my website, when you click an image that's marked appropriately, the lightbox pops up and everything works properly, however, when you exit the lightbox by clicking the overlay or pressing q/x/esc, the overlay hides and everything looks great. The only problem with this is that for some reason, this is being embedded into the body of my code:

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

The problem that this causes is that it isn't ever removed after the lightbox is closed, so the entire page is blanked in

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

This is a problem because this makes the entire top of the page this overlay, and it's never removed after the lightbox is closed. When it's like this, I can't click any links or use any input boxes in the area that it's covering.

I have a feeling that the thing causing this problem is this:

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

I've tried using MooTools with compatibility mode and having every extra turned on, but with no luck.

分享到QQ

分享到微博