开发者

Quickbox with MooTools 1.4

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 rem开发者_StackOverflowoved 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.


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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜