jQuery/Css : A pop-up content Div pushes the page down

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!

Answer 2

You'll need to target the created modal div with CSS and give it a max-height value and a max-width value, and overflow:scroll.

Something like this should work:

div.comments-modal {
  max-width:60%;
  max-height:80%;
  overflow:auto;
}

NOTE: using % values instead of px values will allow your modal's dimensions to adjust with the user's browser/screen size. If you want to prevent that, then simply use px defined values instead.

Answer 3

Try setting max-height and overflow: auto

    #myModal {
        max-height: 300px;
        overflow: auto;
    }

    <div id="myModal" class="reveal-modal">
         <h1>Modal Title</h1>
         <p>Any content could go in here.</p>
         <a class="close-reveal-modal">&#215;</a>
    </div>

Or, you can try

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, 'display' : 'none'});
                            unlockModal();
                        });

You could also try using a fade-in animation that will animate the height of the div from 0 to 100%, then scroll back up as it fades in opacity.

EDIT: Check this fiddle for an example using just jQuery.