How to make modal scroll with main page

Question

I have a modal with the contents taller than the browser height, as a result I have some contents which cannot be displayed. (seems like the modal position is fixed and cannot be scrolled as a whole)

How can I make the modal scrollable with the main page so that I can actually view the contents below?

Answer 1

I've tried <div class="modal myModal"></div>

CSS

.myModal {
      overflow: auto !important; 
      height: 300px; //set a height to a modal so it wont overlapped when the body tag's height is smaller than the modal
}

Answer 2

What you could do is set the modal's CSS position to absolute instead of fixed.

To do this, just get the class name of the modal or ID like this and set it to absolute:

.modal {
position: absolute !important;
}

Or, even better, edit the main CSS for your modal (if you can) and change the position from fixed to absolute.

jsFiddle example: http://jsfiddle.net/hUNZs/