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

我正在为Angular 2单页应用程序使用这些漂亮的小模式弹出窗口，这样它就不会离开主页，而是向用户显示更多的内容。它们漂浮在主内容上方，有点不透明，可以通过关闭按钮关闭。我遇到的问题是，如果它们在任何大小的设备上溢出整个浏览器窗口，除非我添加溢出：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;
  }

.莫代尔{
背景：rgba（0,0,0,0.6）；
身高：100%；
最大高度：100%；
宽度：100%；
溢出：滚动；
}

设置

溢出：隐藏到
主体
当模态打开时，模态是一个角度2组件，它是主体的一部分，因此当我这样做时，它会锁定模态，并且我再次单击打开模态：让b=document.getElementById（'bod'）；b、 style.overflow='hidden'；即使我将modals scroll设置为auto或使用overflow-y和overflow滚动，它也会导致模型不滚动。由于某种原因，它也打断了我的关闭按钮。不过我发现了这个错误，哈哈，谢谢