Opening another fancybox on a page after closing the previous one

I am using fancybox version 2.1.5. When I open the fancybox I noticed the .fancybox-wrap div is inside the .fancybox-overlay div. If I open another fancybox on the same page the .fancybox-overlay div is now outside and above the .fancybox-wrap div.

My definition of the first and the second fancybox are the same and as follows:

$.fancybox({
    href        : '#my_div',
    autoSize    : true,
    fitToView   : false,
    padding     : 0,
    fixed       : true,
    autoCenter  : false,
    topRatio    : 0.5,
});

If the .fancybox-wrap div is inside the .fancybox-overlay div and I scroll the page , when the fancybox content is larger than the window only the fancybox scrolls the background content remains static

However when it is outside the .fancybox-overlay when i scroll both the fancybox and the content behind it scrolls.

How do I prevent the page from scrolling behind.

When you inspect the DEMO in this question the wrap div is outside the overlay div as compared to the demos on the fancybox website.

Solution

First, the DEMO you make reference to (my demo) uses fancybox v2.0.6; things have changed since then.

Second, the fact that .fancybox-wrap div is either inside or outside the .fancybox-overlay depends on the helpers overlay status :

The default value is true like :

helpers: {
    overlay : {
        locked: true
    }
}

... so the .fancybox-wrap div will be INSIDE the .fancybox-overlay div.

On the other hand, if you set the value to false in your custom script, then the .fancybox-wrap div will be OUTSIDE the .fancybox-overlay div.

NOTICE that in the second case (false), you will be able to scroll the page behind fancybox.

DEMO using v2.1.5