Open In App

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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.

Using the css() method to set the overflow property

The css() method can be used to prevent the scroll of the body when a modal is opened by passing the overflow property and its value as hidden to this method as parameters in the form of string.

Syntax:

$('element_selector').css('overflow', 'hidden');

Example: The below example explains how you can set overflow hidden to the body when the modal gets open.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
 
    <script src=
    </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;
        }
    </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>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>
        $(document).ready(()=>{
            $("#btn").click(function () {
                $("#modal").toggleClass("hidden");
                if ($("#modal").hasClass("hidden")) {
                    // Enable scroll
                    $("body").css('overflow', "auto");
                } else {
                    // Disable scroll
                    $("body").css('overflow', "hidden");
                }
            });
        });
    </script>
</body>
 
</html>


Output:

stopScrollGIF

By toggling the class using toggleClass() method

In this approach, we will try to prevent the body scroll using the toggleClass() method. Here, we will define a class with a property overflow: hidden and then toggle that class to the body element to enable and disable the scroll with respect to the modal.

Syntax:

$('element_selector').toggleClass('className');

Example: The below example illustrate the use of the toggleClass() method to prevent the body 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=
    </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>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>
        $(document).ready(()=>{
            $("#btn").click(function () {
                $("#modal").toggleClass("hidden");
                $('body').toggleClass('stopScroll');
            });
        });
    </script>
</body>
 
</html>


Output:

stopScrollGIF

Using the addClass() and removeClass() methods

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=
    </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>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>
        $(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:

stopScrollGIF



Last Updated : 14 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads