How to use the addClass() and removeClass() methods In JQuery
The addClass() and removeClass() method can be used to add the class which takes the overflow: hidden property when the modal is opened and remove it when the modal is closed by simply passing the class as parameter to these methods in the form of string.
Syntax:
$('element_selector').addClass('className')/removeClass('className')
Example: The below example implements the addClass() and the removeClass() methods to prevent the scroll.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" /> < meta name = "viewport" content = "width=device-width, initial-scale=1.0" /> < script src = "https://code.jquery.com/jquery-2.2.4.min.js" > </ script > < style > body { padding: 5% 20%; } #container { z-index: 1; } #btn { border: none; font-size: 24px; padding: 12px 36px; color: white; background-color: green; cursor: pointer; } #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; } .stopScroll{ overflow: hidden; } </ style > </ head > < body > <!--Button to toggle $("#modal")--> < button id = "btn" > Toggle modal </ button > <!--$("#modal") container--> < div id = "modal" class = "hidden" > < div id = "modal-body" > < h1 >w3wiki</ 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 > $(document).ready(()=>{ $("#btn").click(function () { $("#modal").toggleClass("hidden"); if ($("#modal").hasClass("hidden")) { // Enable scroll $("body").removeClass('stopScroll'); } else { // Disable scroll $("body").addClass('stopScroll'); } }); }); </ script > </ body > </ html > |
Output:
How to prevent Body from scrolling when a modal is opened using jQuery ?
In this article, we will learn how we can prevent the body from scrolling when a popup or modal is opened using jQuery. This task can be easily accomplished by setting the value of the overflow property to hidden using the css() method or by adding and removing the class from the body.
Table of Content
- Using the css() method to set the overflow property
- By toggling the class using toggleClass() method
- Using the addClass() and removeClass() methods