How to make the facebox cover only a given div, as opposed to covering the entire body?

Question

I would like the facebox overlay to cover only a given part div, not the entire screen.

I changed "body" in facebox.js, but nothing changes

  $("body").append('<div id="facebox_overlay" class="facebox_hide"></div>')

Any ideas on how this can be done?

Answer 1

The #facebox_overlay is position absolute, which will not recognize static parent position. If you position your container relative, or absolute - it should then only fill the container.

$("#divId").append('<div id="facebox_overlay" class="facebox_hide" />');

CSS:

#divId { position: relative; }