打开 Bootstrap 模式时限制外部滚动

Question

<div class="modal  mt-5p" role="dialog" [ngStyle]="{'display':IONotes}">
  <div class="modal-dialog modal-md mt-0px width-70p">
    <div class="modal-content" style="height:500px">
      <div class="modal-header" style="background-color:#51b8f2;color:white;">
        <button type="button" class="close" data-dismiss="modal" (click)="IONotesClose()">&times;</button>
        <h5 class="modal-title" style="text-align:center">
          <strong>Intra-operative Notes</strong>
        </h5>
      </div>
      <div class="modal-body">
        <div class="col-sm-12">
          <div class="row">
            <div class="col-sm-3">
              <div class="row">
                <div class="col-sm-7">
                  <label style="margin-left: -15%;">Surgery Type :</label>
                </div>
                <div class="col-sm-5">
                  <label>{{M_SurgeryType}}</label>
                </div>
              </div>
            </div>
            <div class="col-sm-5" style="margin-left: 6%;">
              <div class="row">
                <div class="col-sm-7">
                  <label style="font-size: 13px;">Surgery Procedure :</label>
                </div>
                <div class="col-sm-5">
                  <label style="font-size: 13px;margin-left: -72%;">{{surgeryprocedureName}}</label>
                </div>
              </div>
            </div>
            <div class="col-sm-3" style="margin-left: -16%;">
              <button mat-raised-button type="button" *ngIf="removedOtNotes.length != 0" style="margin-left: 40%; background-color:#3dbb96; color:aliceblue;font-family: 'Proxima Nova Semibold';border-radius: 9px;" (click)="ViewunselectedOtNotes()" data-toggle="tooltip" title="Add IO notes">View unselected Ot Notes</button>
            </div>
            <div class="col-sm-1" style="margin-left: 5%;">
              <button mat-raised-button type="button" *ngIf="!IsDischarge" style="background-color:#3dbb96; color:aliceblue;font-family: 'Proxima Nova Semibold';border-radius: 9px;margin-top: 1%;" (click)="AddIoNotes()" data-toggle="tooltip" title="Add IO notes">Add IO notes</button>
            </div>
          </div>
        </div>
        <div class="row ml-1p heightAuto-350px ml-1p position-sticky">

          <table #IONotestable  mat-table  [dataSource]="IntraoperativeNotesSource" class="custom-table withoutbackgroung search-table table-bordered"
                 cdkDropList
                 [cdkDropListData]="IntraoperativeNotesSource"
                  (cdkDropListDropped)="dropTable($event)">

            <ng-container matColumnDef="SNo">
              <th mat-header-cell *matHeaderCellDef class="width-3p">S.No</th>
              <td mat-cell *matCellDef="let i = index" cdkDragHandle>{{i+1}}</td>
            </ng-container>
            <ng-container matColumnDef="Description">
              <th mat-header-cell *matHeaderCellDef class="width-40p">Description</th>
              <td mat-cell *matCellDef="let element;let id = index" (mousedown)="$event.stopPropagation()" contenteditable="true" (keyup)="changeIODesc(id,'OTNotesDescription',$event,element);">{{element.OTNotesDescription}} </td>
            </ng-container>
            <ng-container matColumnDef="Value">
              <th mat-header-cell *matHeaderCellDef class="width-20p">Value</th>
              <td mat-cell *matCellDef="let element;let id = index" [attr.contenteditable]="element.UserInputType !== 'None'" (keyup)="changeInputValue(id,'GivenInputValue',$event,element);">
                <div *ngIf="element.UserInputType == 'User selection'">
                  <mat-select (selectionChange)="changeInputValues($event,element)" placeholder="Select">
                    <mat-option *ngFor="let InputValue of element.InputValue" [value]="InputValue">{{InputValue}}</mat-option>
                  </mat-select>
                </div>
              </td>
            </ng-container>
            <ng-container matColumnDef="Others">
              <th mat-header-cell *matHeaderCellDef>Others</th>
              <td mat-cell *matCellDef="let element;let id = index;">{{element.Others}} </td>
            </ng-container>
            <ng-container matColumnDef="Action">
              <th mat-header-cell *matHeaderCellDef> Action </th>
              <td mat-cell *matCellDef="let element; let i = index;">
                <button mat-icon-button><mat-icon data-toggle="tooltip" title="Remove" (click)="removeDesc(i)" style="color: red;">delete</mat-icon> </button>
              </td>
              <td mat-footer-cell *matFooterCellDef> </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="IntraoperativeNotesColumns;sticky: true"></tr>
            <tr mat-row *matRowDef="let row; columns: IntraoperativeNotesColumns"
                  
                cdkDrag [cdkDragData]="row"></tr>
          </table>
        </div>



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

Above I shared my Bootstrap Modal code, I need to restrict the outside scroll it as shown in the picture once the Modal is opened i need to restrict the outside scroll on the right side.i have tried by giving overflow hidden property for modal content but its not working.Can Anyone tell how to fix this issue, Thanks In Advance

Picture

Answer 1

Toggle overflow:hidden class on body when modal is toggled.

Example:

import { DOCUMENT } from '@angular/common';

constructor(@Inject(DOCUMENT) private document: Document) {}

onModelOpen() {
 //Add hide-scroll class when modal is opened
 this.document.body.classList.add('hide-scroll');
}

onModelClose() {
 //Remove hide-scroll class when modal is closed
 this.document.body.classList.remove('hide-scroll');
}

CSS

.hide-scroll {
 overflow: hidden;
}