CODEWITHSUNDEEP
jqueryfancybox
Ondrej Tokar
Ondrej Tokar

Reputation: 5070

How can I enable scrolling of the parent document while fancybox is opened?

I want a fancybox to appear, but still be able to scroll up and down on the parent page.

Is there a way to do that?

My Fancybox definition:

// Fancy box to appear when user scrolls below video
            $(".fancybox").fancybox({
                autoSize:false,
                modal:false,
                width:400,
                height:'auto',
            });

Upvotes: 0

Views: 808

Answers (2)

JFK
JFK

Reputation: 41143

Fancybox provides that functionality within its API, no need to override any CSS rules

Just add to your script the helpers option like

jQuery(document).ready(function($) {
  $(".fancybox").fancybox({
    // API options
    helpers: {
      overlay: {
        locked: false // allows to scroll the parent page
      }
    }
  }); // fancybox
}); // ready

DEMO

Upvotes: 1

A. Wolff
A. Wolff

Reputation: 74420

You would need to set as CSS rules to overwrite fancybox's ones:

html.fancybox-lock, html.fancybox-lock body {
    overflow: visible !important;
}

html.fancybox-lock body .fancybox-overlay{
    overflow: hidden !important;
}

Upvotes: 2

Related Questions