Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to prevent Body from scrolling when a modal is opened using jQuery?
A modal is a special user interface that we show on top of all the content of the web page. It is used to show some special information on the web page or move users out from the regular flow of the web page.
For example, you may have seen on many websites that subscribe popup box appears on the web page saying to enter your email address to subscribe to the newsletter. Also, the alert box is modal, which doesn’t allow you to interact with the web page content until you close the modal.
So, when we show users important information using the modal, it is always a good idea to prevent the body from scrolling to stop users from interacting with the web page’s content and focus on the important information of the modal.
In this tutorial, we will learn different approaches to prevent the body from scrolling when the modal is opened using Jquery.
Disable body scroll using the ‘overflow’ property of CSS
We can use the overflow property to avoid scrolling on the HTML element. Whenever we set the ‘hidden’ value for the overflow property, it stops scrolling.
In this approach, whenever users open the modal, we set overflow to hidden; whenever users close the modal, we will set overflow to auto to allow users to scroll.
Syntax
Users can follow the syntax below to prevent the body from scrolling when the modal is opened using the overflow property.
// add overflow-hidden when users open the modal
$('body').css("overflow", "hidden");
// add overflow-auto when users close the modal
$('body').css("overflow", "auto");
In the above syntax, we used Jquery's CSS() method to set the particular value of the ‘overflow’ property on the web page body when users open and close the modal.
Example 1
In the example below, we created the div element containing the ‘modal’ class name. Also, we added the content to show the modal inside the div element. Next, we added the ‘close modal’ button inside the modal to close the modal and the ‘open modal’ button on the web page to open the modal.
In CSS, we style the modal and its content in such a way so that it appears on top of the other content of the web page. Also, we styled the buttons. The ‘modal-open’ class contains the ‘overflow: hidden’ CSS property in CSS.
We added the ‘modal-open’ class in the open button and the ‘modal-close’ class in the close button. In JavaScript, whenever users click the ‘open modal’ button, we add a ‘modal-open’ class in the body and open the modal. Whenever users click the ‘close modal’ button, we use the removeClass() method to remove the ‘modal-open’ class from the body and close the modal.
In the output, users can observe that they cannot scroll the body when the modal is open.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<style>
.modal {
position: fixed;
display: none;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 15px;
border-radius: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.modal-open { overflow: hidden; }
.btn {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 10px;
}
.scroll { height: 1000px; background-color: red;}
</style>
</head>
<body>
<h3> Using the <i> overflow CSS property </i> to disable the body from scrolling when a modal is opened </h3>
<p> Click the button below to open the modal. </p>
<a href = "#" class = "btn modal-open"> Open Modal </a> <br><br>
<div class = "scroll"> </div>
<div class = "modal">
<h2> Modal Content </h2>
<p> This is the content of the modal window. </p>
<a href = "#" class = "btn modal-close"> Close </a>
</div>
<script>
$(document).ready(function () {
$('.modal-open').on('click', function () {
$('body').addClass('modal-open');
$('.modal').fadeIn();
});
$('.modal-close').on('click', function () {
$('body').removeClass('modal-open');
$('.modal').fadeOut();
});
});
</script>
</html>
Example 2 (Using the css() method to set overflow property)
In this example, we used Jquery's CSS() method to set the ‘overflow’ property for the web page body. We created the modal in this example as in the first example.
In Jquery, we set ‘overflow: hidden’ using the CSS() method when users click the open modal button and ‘overflow: auto’ when users click the close modal button.
We need to pass the CSS property as a first parameter and its value as a second parameter of the CSS() method.
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
<style>
.modal {
position: fixed;
display: none;
top: 20%;
left: 50%;
padding: 15px;
border-radius: 12px;
transform: translate(-50%, -50%);
background-color: white;
}
.btn {
display: inline-block;
padding: 10px 20px;
background-color: green;
color: white;
text-decoration: none;
border-radius: 10px;
}
.scroll {height: 130%; background-color: green; }
</style>
</head>
<body>
<h3> Using the <i> JQuery's scroll-lock plugin </i> to disable the body from scrolling when a modal is opened </h3>
<p> Click the button below to open the modal. </p>
<a href = "#" class = "btn modal-open"> Open Modal </a> <br> <br>
<div class = "scroll"> </div>
<div class = "modal">
<h2> Modal Content</h2>
<p> This is the content of the modal window. </p>
<a href = "#" class = "btn modal-close"> Close </a>
</div>
<script>
$(document).ready(function() {
$('.modal-open').on('click', function() {
$('body').css("overflow", "hidden");
$('.modal').fadeIn();
});
$('.modal-close').on('click', function() {
$('body').css("overflow", "auto");
$('.modal').fadeOut();
});
});
</script>
</html>
Conclusion
We learned to prevent the body from scrolling when users open the modal on the web page. Here, we used the ‘overflow’ property in different ways to achieve our goal. In the first example, we set the ‘overflow’ property by adding a particular class containing the overflow property to the body. In the second example, we set the overflow property by using the css() method.
However, users can also use Jquery’s scroll-lock plugin to lock the screen, but it might not allow users to interact with the modal.
21K+ Views
