时间戳

首页 > 解决方案 > 打开 Bootstrap 模式时限制外部滚动

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

问题描述

<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>

上面我分享了我的 Bootstrap 模态代码，一旦打开模态，我需要限制外部滚动，如图所示，我需要限制右侧的外部滚动。我尝试通过为模态内容提供溢出隐藏属性，但是它不工作。任何人都可以告诉如何解决这个问题，在此先感谢

图片

标签： javascriptangulartypescriptbootstrap-4

解决方案

切换模式时切换overflow:hidden类body。

例子：

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;
}

推荐阅读