Angular 2模式弹出超过100％的高度和滚动，不友好的用户体验

Question

我正在为我的Angular 2单页面应用程序使用这些漂亮的小模态弹出窗口，这样它就不会离开主页面，而是向用户显示更多内容。它们漂浮在主要内容之上，使背景具有一点不透明度，并且可以通过关闭按钮关闭。我遇到的问题是，如果他们在任何大小的设备上溢出整个浏览器窗口，除非我添加overflow：auto;否则他们无法看到它们。然后它添加了一个很难使用的辅助滚动条。如果你没有特别点击第二个滚动条，它将只滚动背景。有办法解决这个问题吗？

<div style="z-index: 9999; float-offset: 50%; position: fixed;" class="modal fade" tabindex="-1" [ngClass]="{'in': visibleAnimate}"
     [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
  <div class="modal-dialog">
    <div class="modal-content">   
      <div class="col-md-12 col-sm-12 col-xs-12 single-item-modal">
          <!-- content goes here--> 
    <a [routerLink]="['/']"><div (click)="hide()"><img src="../assets/img/we.png"/></div></a>




.modal {
    background: rgba(0,0,0,0.6);
    height: 100%;
    max-height: 100%;
    width: 100%;
    overflow: scroll;
  }