I'm trying to simplify what I'm doing here as much as possible.

jQuery/Javascript loads content into this <div> via AJAX (jQuery "load" command):

<div id="container"></div>

That content contains a Floatbox link, so it ends up:

<div id="container">
<a class="floatbox" href="popup.htm">link</a>
</div>

popup.htm contains Javascript and a "fb.end();" statement after a button is clicked. However, the Floatbox will not close.

If I insert the Floatbox <a> directly into my main page (i.e., NOT via AJAX), then the fb.end(); works fine.

If I insert the Floatbox <a> via AJAX, fb.end(); does not work.

Does this make sense? Does the fact that the <a> link is loaded via AJAX (and presumably not in the DOM of the main page) mean that my fb.end(); call would not work?

Thank you!

popup.htm is being loaded as an iframe. Iframes have their own self-contained document, window object, and javascript global namespace. You are calling fb.end from the iframe's window object but there is no fb object defined there.

Either include floatbox.js on the iframe document so that fb functions can be called directly from there, or use the parent window's fb object with parent.fb.end().

Making it parent.fb.end(); solved that problem, thank you.

There is a side effect, though. When my page initially loads, the <a> link is loaded via AJAX, clicking that link opens the Floatbox, clicking a "close" button in popup.htm calls parent.fb.end(); which closes the Floatbox.

When that happens, the main page refreshes the content in the <div> with AJAX again, including recreating the <a> link.

Now, when I click the <a> link, the page loads with popup.htm however now it is not a Floatbox, it loads the entire browser window with popup.htm.

I experimented with NOT recreating the content with AJAX, leaving it static instead... in that case popup.htm DOES load into a Floatbox.

Really confused by this. The initial page load happens by AJAX and the link to Floatbox works fine. I reload the content dynamically, now the same link won't open in a Floatbox.

Are there any issues with using AJAX to load my link that would interfere with the link "seeing" that it should open in a Floatbox?

Thanks!

Please see http://floatboxjs.com/instructions#dynamic

The short version is, you need to run fb.activate() after dynamically adding fresh floatboxed links to a page in order to attach floatbox behaviour to those links.

Thanks again, that fixed it! I also had to update my Floatbox, which was two years old.