Question

I am using a jQuery plugin called Reveal. It just shows a div like a pop-up when you click a link with specific class.

In my website I am using this for showing comments. The problem is that when the content of div is a lot, the opened div pushes the bottom of page.

Is there a jQuery or Css way to make unwanted space be gone after comment div is closed ?

Edit 1: This is the closing animation code:

modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                        modal.animate({
                            "top":  $(document).scrollTop()-topOffset + 'px',
                            "opacity" : 0
                        }, options.animationspeed/2, function() {
                            modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
                            unlockModal();
                        });

Edit 2: If I use scrolling, this is what happens:

normal : http://jsfiddle.net/K4E3g/1/

scrolling : http://jsfiddle.net/K4E3g/2/

Answer 1

Edited

The plugin uses visibility: hidden / visible to show and hide a modal extensively throughout its code. This means that any modal in its closed state is set to visibility: hidden, which has the effect that, if the modal is larger than the page, making the page longer than it should be, as elements with visibility: hidden still take up space on the page.

You can either try changing all the visiblity: hidden to display: none and visibility: visible to display: block in the plugin itself and see if that gets you the desired result, however I have not tested this and there may be undesirable side effects.

Alternatively, I would suggest looking at a different modal plugin such as Eric Martin’s excellent Simple Modal plugin.

I hope this helps!