How to prevent Body from scrolling when a modal is opened using jQuery ?

12 Jan, 2021
Given an HTML document with a modal, the task is to prevent the body element from scrolling whenever the modal is in an open state. This task can be easily accomplished using JavaScript.
Approach: A simple solution to this problem is to set the value of the “overflow” property of the body element to “hidden” whenever the modal is opened, which disables the scroll on the selected element. Once the modal is closed, we would set the “overflow” property of the body element to “auto” so that scroll functionality is enabled on the body element. To find out whether the modal is opened or not, we would check if it has the “hidden” CSS class in its class list using the classList.contains() method of JavaScript. This “hidden” class is responsible for the opening and closing (changing display property) of the modal on a button click. Check out the given example for a better understanding. 
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content=        "width=device-width, initial-scale=1.0" />      <style>        body {            padding: 5% 20%;        }          #container {            z-index: 1;        }          #btn {            border: none;            font-size: 24px;            padding: 12px 36px;            color: white;            background-color: green;        }          #modal {            height: 200px;            width: 400px;            padding: 60px;            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%, -50%);            z-index: 999;            background-color: green;            color: white;        }          .hidden {            display: none;        }    </style></head>  <body>      <!--Button to toggle modal-->    <button id="btn" onclick="showModal()">        Toggle modal    </button>      <!--Modal container-->    <div id="modal" class="hidden">        <div id="modal-body">            <h1>GeeksforGeeks</h1>            <h2>This is a modal</h2>        </div>    </div>      <!--Long text so that the body scrolls-->    <div id="container">        <h1>            Given a graph and a source vertex in             the graph, find shortest paths from             source to all vertices in the given             graph. Dijkstra’s algorithm is very             similar to Prim’s algorithm for minimum            spanning tree. Like Prim’s MST, we             generate a SPT (shortest path tree)             with given source as root.            We maintain two sets, one set contains             vertices included in shortest path tree,            other set includes vertices not yet             included in shortest path tree. At every            step of the algorithm, we find a vertex             which is in the other set (set of not yet            included) and has a minimum distance from            the source. Below are the detailed steps            used in Dijkstra’s algorithm to find the            shortest path from a single source vertex            to all other vertices in the given graph.            Algorithm Create a set sptSet (shortest             path tree set) that keeps track of vertices            included in shortest path tree, i.e., whose            minimum distance from source is calculated             and finalized. Initially, this set is empty.            Assign a distance value to all vertices in             the input graph. Initialize all distance             values as INFINITE.            Assign distance value as 0 for the source             vertex so that it is picked first. While             sptSet doesn’t include all vertices Pick a             vertex u which is not there in sptSet and             has minimum distance value. Include u to             sptSet. Update distance value of all adjacent             vertices of u. To update the distance values,            iterate through all adjacent vertices. For             every adjacent vertex v, if sum of distance             value of u (from source) and weight of edge             u-v, is less than the distance value of v,            then update the distance value of v.              Given a graph and a source vertex in the             graph, find shortest paths from source to            all vertices in the given graph. Dijkstra’s             algorithm is very similar to Prim’s             algorithm for minimum spanning tree.            Like Prim’s MST, we generate a SPT (shortest             path tree) with given source as root.            We maintain two sets, one set contains             vertices included in shortest path tree,             other set includes vertices not yet included            in shortest path tree.            At every step of the algorithm, we find a             vertex which is in the other set (set of not             yet included) and has a minimum distance             from the source.              Below are the detailed steps used in             Dijkstra’s algorithm to find the shortest             path from a single source vertex to all other             vertices in the given graph. Algorithm            Create a set sptSet (shortest path tree set)             that keeps track of vertices included in             shortest path tree, i.e., whose minimum             distance from source is calculated and             finalized. Initially, this set is empty. Assign             a distance value to all vertices in the input             graph. Initialize all distance values as INFINITE.            Assign distance value as 0 for the source             vertex so that it is picked first. While sptSet             doesn’t include all vertices Pick a vertex u             which is not there in sptSet and has minimum             distance value. Include u to sptSet.            Update distance value of all adjacent vertices             of u. To update the distance values, iterate             through all adjacent vertices. For every             adjacent vertex v, if sum of distance value             of u (from source) and weight of edge u-v,             is less than the distance value of v, then             update the distance value of v.        </h1>    </div>      <script>                  // Select required elements from the DOM        const modal = document.querySelector("#modal");        const body = document.querySelector("body");          const showModal = function (e) {            modal.classList.toggle("hidden");              if (!modal.classList.contains("hidden")) {                // Disable scroll                body.style.overflow = "hidden";            } else {                // Enable scroll                body.style.overflow = "auto";            }        };    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
jQuery-Misc
Picked
CSS
HTML
JQuery
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.