jquery got me stumped, again

From: CHYRON (DSMITHHFX) 4 Apr 2013 14:04
To: ALL1 of 6
I trying to implement bPopup and got it sort of working with this:

code: $(document).ready(function(){
    $(".thumb").click(function() {
        var thispop = $(this).next(".pop");
        thispop.bPopup({
            [other stuff]
        }
        , function(){
            [more stuff])
            })
        });
    });
});

 

".thumb" is a class of thumbnail images, ".pop" is the popup div class, one of which follows each thumb. The "other stuff" in the bPopup function is some custom bPopup parameters, as you probably guessed.

Problem is, I need to open popups from a number of thumbs (which is why I'm using classes rather than ids, as bPopup intended [turns out it's selector-agnostic]).

My script works on the first instance (only) of .thumb & .pop, then it stops working altogether so when I click on that first .thumb again (after closing the popup), it doesn't re-open. When I built it using ids (one function per), it works reliably, but I'm hoping to avoid this sort of kludge.
EDITED: 4 Apr 2013 14:13 by DSMITHHFX
From: CHYRON (DSMITHHFX) 4 Apr 2013 19:45
To: ALL2 of 6
Solved -- nothing wrong with script (or next() function)... by viewing generated source I spotted a couple of egregious markup errors (fail)

Hmm, well, not quite it seems. Though fixing the errors got the thumbs working at least on the first instance, the pPopup is doing some weird stuff to the generated code (moving the .pop divs to the end of the page hwere next() can't find them for repeat clicks. Damn.
EDITED: 4 Apr 2013 19:59 by DSMITHHFX
From: Matt 4 Apr 2013 20:35
To: CHYRON (DSMITHHFX) 3 of 6
It'll probably be moving the div to the very last element on the page so it can make sure it appears above all other elements on the page.

If that's the case, you'll probably have to be a bit cleverer with the div it is moving, have only 1 for all the thumbs and dynamically change it's content depending on the thumb that was clicked.
EDITED: 4 Apr 2013 20:38 by MATT
From: CHYRON (DSMITHHFX) 4 Apr 2013 21:30
To: Matt 4 of 6
quote:
It'll probably be moving the div to the very last element on the page so it can make sure it appears above all other elements on the page.

I thought z-index took care of that, but I have a poor understanding of how the popup works. I've suggested to the author that instead of moving the popup div, he copies and (on close) destroys the copy, leaving the page in its original state, so we'll see if that's viable.

From: Matt 4 Apr 2013 22:07
To: CHYRON (DSMITHHFX) 5 of 6
The problem with z-index is that it is relative. By moving the div so it's a child of the body tag, it will have a relative z-index to elements that are also children of the body tag and not of the body tag's siblings' children.

See http://stackoverflow.com/a/7482870 for a good explanation.
From: CHYRON (DSMITHHFX) 5 Apr 2013 15:58
To: Matt 6 of 6
I managed to get it working by overrridng the bPopup "append" function (with a handy parameter), and using JQuery clone() and remove().