Remove Scroll Bar when Modal Appears

Question

I know this has been asked but has not been 100% and been used effectively.

I have a modal on my page. That looks like this:

https://www.dropbox.com/s/ha4smz4mlgm1z18/Capture.PNG

I am wanting to remove the scroll bar when the modal appears. How can this be done with CSS/JS? Or can it not be done at all? I do not want to change the height of the modal like other examples posted here.

Please note: I do not want to remove the Scroll Bar 100% Only when a Modal appears due to the jumpiness of the page. I am using Bootstrap 3.0, (Standard Bootstrap skin, Though I may change it later on)

Extra Information:

 <!-- Contact Modal -->
<div aria-hidden='true' class='modal fade' id='contactModal' role='dialog' tabindex='-1'>
    <div class='modal-dialog'>
    <div class='modal-content'>
                <div class='modal-header'>
                    <button aria-hidden='true' class='close' data-dismiss='modal' type='button'>×</button>
                    <h4 class='modal-title'>Contact Us Form</h4>
                </div>
    <div class='modal-body'>
        <form action='#' role='form'>
        <div class='form-group'>
            <div class='row'>
            <div class='col-md-6'>
                <label class='control-label'>Your Name</label>
                <input class='form-control' placeholder='your username' type='text'>
            </div>
                <div class='col-md-6'>
                    <label class='control-label'>Your Email</label>
                    <input class='form-control' placeholder='your password' type='text'>
                </div>
            </div>
        </div>
            <div class='form-group'>
                <div class='row'>
                    <div class='col-md-12'>
                        <label class='control-label'>Your Message</label>
                        <textarea class='form-control' name='' rows='4'></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
            <div class='modal-footer'>
                    <button class='btn btn-default' data-dismiss='modal' type='button'>Cancel</button>
                <button class='btn btn-primary' type='button'>Send Message</button>
            </div>
        </div>
    </div>
</div>  

This Is my Modal Code.

This calls out the modal:

Would you like to Contact Us? Or Visit our

All Answers given have not solved the problem, or have cause more.

Answer 1

Once, check out this link . May be this will help you. Can u share the sample code what ar you trying..???

$('#openBtn').click(function () { $('#myModal').modal({ show: true }); });

Answer 2

Include the following css to your code:

  .modal {
      overflow-y:hidden;
  }

This will override the default css. It worked for me. If its not working try to post your code.