Prevent external scrolling while Bootstrap modal is active

<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)">
            <!-- Table content goes here -->
          </table>
        </div>



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

If you can see the picture in the link provided, when my Bootstrap Modal opens, I want to prevent the scroll on the right side of the page. I have tried setting the overflow property to hidden for the modal content, but it hasn't worked. Can anyone help me with fixing this issue? Thank you in advance.

Link to Picture

javascriptangulartypescriptbootstrap-4

Answer №1

Apply the overflow:hidden class to the body element when a modal is opened or closed.

For example:

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

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

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

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

Here is the CSS:

.hide-scroll {
 overflow: hidden;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue in Angular: Attempting to access properties of undefined (specifically 'CustomHeaderComponent')

I have encountered a persistent error message while working on a new component for my project. Despite double-checking the injection code and ensuring that the module and component export logic are correct, I am unable to pinpoint the issue. custom-header ...

javascriptangulartypescript

Utilize personalized Bootstrap variables within your Angular application

I am attempting to customize the default colors of Bootstrap within my Angular project. I have established a _variables.scss file in the src directory. Within this file, I have included the following code: $primary: purple; Next, I imported my _variables ...

angularsassbootstrap-4

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

Encountering an issue with nextjs 13, let me explain the situation: Within a card component, there is an external div containing an internal link to navigate to a single product page. Using onClick on the external div enables it to gain focus (necessary f ...

javascripthtmlreactjstypescriptnext.js

Using Angular to make an API call within a JavaScript function

I am facing an issue when trying to call an API in a JavaScript function as shown below. The injected services (subService) and defined variables (formData) are not recognized in the JavaScript function, resulting in an error of undefined addSub. How can I ...

javascriptangulartypescript

How can a string be transformed into a JavaScript Object without using JSON?

I have a good grasp on parsing a valid JSON string using JSON.parse('{"key" : "value"}'). But what happens when dealing with a valid JS object, but invalid JSON, such as: JSON.parse("{ key : 'value'}")? The outcome of this example is a ...

javascriptjsonstringparsingobject

How to create a basic calculator in AngularJS with two textboxes specifically designed for calculating squares?

My code snippet is as follows: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body> <div ng-app="app"> <div ng-controller="Calcu ...

javascriptangularjs

Executing Actions Prior to Redirecting

I am working on implementing a timer process using a custom JQuery plugin that will redirect to the login page after a specific number of minutes. Additionally, when the timer reaches zero, I need to execute a task, which in this case involves making a cal ...

javascriptjquery.netasp.netweb-services

Test your word skills with the Jumbled Words Game. Receive an alert when

After reviewing the code for a jumble word game, I noticed that it checks each alphabet individually and locks it if correct. However, I would like to modify it so that the entire word is only locked if all the letters are correct. Any suggestions on how t ...

javascriptjqueryjquery-ui-sortablejquery-ui-draggable

Svelte: wrong button triggered click event

My current setup involves a svelte app in which: Clicking a button labeled "Show" triggers the display of an input text box and a save button by setting a show variable to true. Upon clicking the "Save" button, a function is called that changes the show v ...

javascriptsveltesvelte-3

How can we determine the nL and nH values using an ESC/POS command?

Looking to adjust the printer's head position using ESC / pos commands: ESC $ command sets the absolute horizontal position ESC $ nL nH Trying to figure out how to calculate the values for nL and nH? ...

javascriptphpc

Encountering a problem when trying to set the value in the controller and receiving unexpected output from the console

Attempting to assign a value to an object and show it in the view, but encountering an issue. When setting the vm.order.info.when to 'Any Value' and logging the vm.order.info, the value appears correct at first glance. However, upon inspecting th ...

javascriptangularjs

The @angular/fire package is unable to locate the AngularFireModule and AngularFireDatabaseModule modules

I am facing some challenges while trying to integrate Firebase Realtime Database into my Angular project. Specifically, I am encountering difficulties at the initial step of importing AngularFireModule and AngularFireDatabaseModule. To be more specific, I ...

angulartypescriptfirebaseangularfire

In JQuery, an empty string will be returned if it contains the dollar sign character

In the scenario presented here, the value is retrieved accurately with the exception of when it includes a $ symbol at the beginning (e.g. $25.00), in which case it consistently results in an empty string. HTML: <input type="number" class="form-contro ...

javascriptjquery

Navigating the world of gtag and google_tag_manager: untangling

Tracking custom events in my react application using Google Analytics has been successful. Initially, I followed a helpful document recommending the use of the gtag method over the ga method for logging calls. The implementation through Google Tag Manager ...

javascriptreactjsgoogle-analyticsgoogle-tag-managernext.js

How can I specify which node_modules to include when using electron-packager in Electron?

I am in the process of packaging my electron app, and it specifically requires the mqtt and node-notifier modules. What I want to do is exclude all node_modules except for these two modules. Let's say I want to exclude the following files from packag ...

javascriptregexnode.jselectron

Tips on utilizing media queries to optimize website layout for mobile devices

I'm currently working on a responsive website and utilizing media queries for that purpose. However, I've encountered an issue where the media queries don't seem to apply when the browser window is set to mobile view. Below is the snippet of ...

cssbootstrap-4media-queries

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

I'm struggling to conceal an absolutely positioned image within a CSS grid layout. Below is the code snippet: HTML: <div class="relative-parent"> <div v-for="item in 12" class="hiding-parent"> <div c ...

javascripthtmlcssvue.js

Create a PDF document using a combination of charts and tables

When I try to create a PDF file with both the chart and table embedded, only the table is showing up. Can someone please provide me with some suggestions on how to resolve this issue? JSFIDDLE LINK ...

javascriptjquerychart.jsjspdf

What is the best way to retrieve the name of a static method within a class?

In my code, I am logging multiple messages in a static method and I want to use the method name as context. However, I do not want to create a separate variable called `context` and assign the function/method name to it. I would like to be able to access ...

typescript

What is the best way to incorporate lottiefiles for a loading animation on a Next.js project's landing

Is there a way to incorporate the use of lottie in a Next.js project (App Structure) in order to load an animated logo seamlessly? I attempted to include "use client" without success, and also tried importing Lottie from react-lottie as a dynamic import. ...

javascriptreactjsnext.jsserver-side-renderinglottie