How to make this Modal scrollable?

Hi there I've been struggling quite a bit on how to make this modal scrollable. I've tried everything written out there similar to my issue. I want it to contain my terms and conditions that I want the user to scroll through.

            <div id="modal-container">
                <div class="modal-background">
                    <div class="modal" style="overflow:scroll;">
                        <div class="termsandconditions">

                        <h3>Terms of Use</h3>
                        <p>By subscribing you are willing to...</p>
                        <p>...</p>

                        </div>
                    </div>
                </div>
            </div>

This is the exact code https://jsfiddle.net/hghazni/jxy3fx0x/1/

And this is the live version if you want to look at the whole thing (it's in the 'leave a review' section) once you click the Terms and conditions link.

http://bodyondemand.co.uk

I appreciate it any help in making the modal scrollable!

Solution

To scroll the content you need to set height for <div class="modal"> element. You already set overflow:scroll which is not enough,

Here's the place you need to update,

 $('#modal-container').removeAttr('class').addClass(buttonId).find('.modal').height($(window).outerHeight(true));

You didn't give us proper working fiddle and it has some issues, I made it work based on assumption. Here's the updated fiddle to test, https://jsfiddle.net/jxy3fx0x/8/