Scrolling bar deactivated when modal appears

Hi there!

I have a  modal that appears successfully 5 seconds after the homepage finished loading (as desired), in the bottom-right corner of the homepage (as desired).

This homepage is long, therefore it has a proper scrolling bar in the usual right-left corner.

Problem: when the modal appears, the scrolling is substituted by a dark column, in other words, I guess the scrolling is deactivated when the modal appears.

I want to be able to still read the homepage (using the scrolling bars) without closing the modal first, I mean, I have the opportunity to close the modal in the modal itself, but I don´t want the modal to make "the background page" be different than it was before the modal, i.e., I still want to be able to read/use the homepage as if the modal was not there (while it IS there).

Below I present all code (part A in one page, part B in another page) that I believe is relevant for the situation.  I guess some CSS property must be changed or added.

This is my problem/question, of course.

Thanks,
fskilnik.


(A) HTML page:

<link rel="stylesheet" href="css/style_modal.css">

... ...  ...

<!-- Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-body">
                  <div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
</button>                        
                    <div class="offset-top-10 text-darker big text-bold">Register for the <span class="text-danger">Free Trial</span></div>
                  </div>
               
               <form name="MyPopUp" data-form-output="form-output-global" data-form-type="contact" method="post" action="Registration/etc.asp" onsubmit="return validateForm()"  class="text-left offset-top-30">
                        <div class="form-group">
                          <div class="input-group input-group-sm"><span class="input-group-addon input-group-addon-inverse"><span class="input-group-icon mdi mdi-account-outline"></span></span>
                            <input name="email" id="login-email" placeholder="E-mail" type="email" data-constraints="@Required @Email" class="form-control">
                                          <input name="TemporaryPswd" type="hidden" id="TemporaryPswd" value= "" />
                          </div>
                        </div>
          <button type="submit" class="btn btn-sm btn-icon btn-block btn-primary offset-top-20">Sign In <span class="icon mdi mdi-arrow-right-bold-circle-outline"></span></button>
          </form>
      </div>
    </div>
  </div>
</div>      
             

(B) CSS page  (style_modal.css)

 @charset "UTF-8";

.modal-backdrop {background: none;}      

.modal.in .modal-dialog {
    position: absolute;
    bottom:0px;
    right:0px;
    margin:0px;
      width:500px;
    height:300px;      
}