Home/ Questions/Q 6611369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T19:57:39+00:00

I’ve been trying out a few lightboxes for my website using MooTools 1.4, and

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is an actual bug in mootools 1.4 https://github.com/mootools/mootools-core/issues/2074

    Its about to be fixed this week in 1.4.1 (hopefully) but you can take the updated Fx.tween element shortcut protiotypes code for the fade here:
    https://github.com/cpojer/mootools-core/commit/11b4257f12a51454bd513ab1ac32cd5239d66098

    Alternatively, use a simple tween on opacity instead of .fade(), it allegedly works. You can also do a destroy on the overlay, which to me is the best fix

    • 0