If Thickbox is opened set body noscroll

Question

My JS/jQuery knowledge is very basic so I'm asking for a bit of help here.

I'm trying to achieve something like a Pinterest effect with Thickbox.

What I'm assuming should happen is using JS or jQuery to monitor Thickbox actions (if #TB_window is present or not) and apply the following rules:

• If Thickbox is opened -> set body style to overflow: hidden
• Else Thickbox is closed -> set body style to overflow: auto

I'm using the integrated into WordPress Thickbox with the function - add_thickbox(); if it makes any difference.

Answer 1

I'm unsure as to the construct of the page but the following code should fix it with a little tweaking

$(document).ready(function(){
    $('.element').click(function(){
        $('.body').css({'overflow':'hidden'});
    });
    $('.overlay, .close-button').click(function(){
        $('body').css({'overflow':'visible'});
    });
});

Just replace the following with the correct class names

.element - the class of the clickable link or image that opens the Thickbox
.overlay - the class of the semi-transparent overlay behind the Thickbox
.close-button - if needed, the class of the close button on the Thickbox