jquery got me stumped, again - Teh Forum

<body> <div id="header"> <span class="left"> <span class="back"><a href="lthread_list.php?webtag=DEFAULT"><span class="image mobile_back" title="Back"></span></a></span> <span class="image mobile_logo" title="Beehive Forum Logo"></span> </span> <ul> <li> <a class="reply_all" href="lpost.php?webtag=DEFAULT&reply_to=40429.0&return_msg=40429.3"> <span class="image mobile_reply_all"></span><span class="text">Reply to All</span> </a> </li> <li> <a class="navigation" href="#"> <span class="image mobile_navigation"></span><span class="text">Show messages</span> </a> </li> <li> <a class="main" href="#"><span class="image mobile_menu" title="Menu"></span> </a> </li> </ul> </div> <div class="menu main"> <ul> <li><a href="lthread_list.php?webtag=DEFAULT">Messages</a></li> <li><a href="lpm.php?webtag=DEFAULT">Inbox</a></li> <li><a href="lsearch.php?webtag=DEFAULT">Search</a></li> <li><a href="llogon.php?webtag=DEFAULT">Login</a></li> </ul> </div> <div class="menu navigation"><a href="lmessages.php?webtag=DEFAULT&msg=40429.1">1–6</a></div> <div id="page_content"> <h3 class="thread_title"><a href="index.php?webtag=DEFAULT&amp;msg=40429.3">jquery got me stumped, again</a> </h3> <div id="messages" data-navigation="40429_3_6_10"> <a name="a40429_3"></a><div class="message" id="message_40429_3"> <div class="message_header"> <div class="message_from"> From: Matt<span class="message_time"> 4 Apr 2013 19:35</span> <div class="clearer"></div> </div><div class="message_to">To: CHYRON (DSMITHHFX) <span><span class="image post_read" title="Read: 4 Apr 2013 20:25"></span></span> <span class="message_count">3 of 6</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40429.3">40429.3</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40429.2">40429.2</a></div> <div class="message_body"> 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.<br /><br /> 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.<div class="edit_text">EDITED: 4 Apr 2013 19:38 by MATT</div> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40429.3&return_msg=40429.3" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40429.3"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40429_4"></a><div class="message" id="message_40429_4"> <div class="message_header"> <div class="message_from"> From: CHYRON (DSMITHHFX)<span class="message_time"> 4 Apr 2013 20:30</span> <div class="clearer"></div> </div><div class="message_to">To: Matt <span><span class="image post_read" title="Read: 4 Apr 2013 20:59"></span></span> <span class="message_count">4 of 6</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40429.4">40429.4</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40429.3#a40429_3" target="_self">40429.3</a></div> <div class="message_body"> <div class="quotetext"> <b>quote:</b></div> <div class="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.</div> <p> 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.</p> </div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40429.4&return_msg=40429.3" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40429.4"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40429_5"></a><div class="message" id="message_40429_5"> <div class="message_header"> <div class="message_from"> From: Matt<span class="message_time"> 4 Apr 2013 21:07</span> <div class="clearer"></div> </div><div class="message_to">To: CHYRON (DSMITHHFX) <span><span class="image post_read" title="Read: 4 Apr 2013 22:36"></span></span> <span class="message_count">5 of 6</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40429.5">40429.5</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40429.3#a40429_4" target="_self">40429.4</a></div> <div class="message_body"> 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.<br /><br /> See <a href="http://stackoverflow.com/a/7482870">http://stackoverflow.com/a/7482870</a> for a good explanation.</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40429.5&return_msg=40429.3" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40429.5"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div><a name="a40429_6"></a><div class="message" id="message_40429_6"> <div class="message_header"> <div class="message_from"> From: CHYRON (DSMITHHFX)<span class="message_time"> 5 Apr 2013 14:58</span> <div class="clearer"></div> </div><div class="message_to">To: Matt <span><span class="image post_read" title="Read: 5 Apr 2013 16:13"></span></span> <span class="message_count">6 of 6</span><div class="clearer"></div> </div> </div> <div class="message_links"> <a href="lmessages.php?webtag=DEFAULT&msg=40429.6">40429.6</a> In reply to <a href="lmessages.php?webtag=DEFAULT&msg=40429.3#a40429_5" target="_self">40429.5</a></div> <div class="message_body"> I managed to get it working by overrridng the bPopup "append" function (with a handy parameter), and using JQuery clone() and remove().</div> <div class="message_footer"> <div class="message_footer_links"><a href="lpost.php?webtag=DEFAULT&reply_to=40429.6&return_msg=40429.3" class="reply"><span class="image post"></span>Reply</a></div> <div class="message_vote_form" data-msg="40429.6"> <span class="rating">0/0</span> <span class="image vote vote_down vote_down_off" title="Vote Down"></span> <span class="image vote vote_up vote_up_off" title="Vote Up"></span> </div> </div> </div></div> </div> </body>