When you’re running a website, you know how effective popups are – for engaging users, promoting offers, and boosting conversions.
But what happens when a popup modal is open, and users are still able to scroll the page behind it? It can be distracting and make the popup less effective.
Luckily, you can easily disable the background scrolling with two methods. One requires you to tinker with custom code using CSS and Javascript. Another one gets the job done by using a popup builder plugin.
In this guide, I’ll show you how to implement both methods, so you can keep users focused and maximize conversions.
Why Disable Background Scrolling?
Disabling background scrolling helps create a more focused and distraction-free experience for users when a popup modal appears. Here’s why it’s important:
Improved User Experience: When a popup is displayed, users may unintentionally scroll the page, leading to an unwanted experience. Disabling background scrolling ensures the modal stays in the center of the screen and is visible to users.
Enhances Focus and Improves Conversion: A fixed modal without the distraction of background content increases focus, making sure users pay attention to the message, offer, or CTA in the modal.
How to Stop Background Scrolling When Popup is Open
When implementing a popup or modal on a website, it’s often important to prevent the background from scrolling to maintain focus on the modal content.
There are two methods you can disable background scrolling when the popup modal is open. The first one is writing custom code using CSS and JavaScript. And the second method is using a popup builder plugin like WowOptin.
1. Using CSS & Javascript:
This method requires dynamically adding or removing a class to the body element when the popup modal is opened. The class applies the overflow: hidden style to the body, which disables scrolling.
The benefit of this method is it does not require any plugin dependencies, giving you full control over the behavior and design of the popup.
2. Using Popup Builder Plugin:
If you need a no-code solution, you can use a popup builder plugin like WowOptin. In addition to creating stunning popups, it also lets you disable background scrolling in just one click.
This method doesn’t require you to manually write JavaScript or CSS to disable scrolling. The plugin automatically disables scrolling when a popup modal is triggered, ensuring a smooth user experience.
In the next sections, you will learn the step-by-step process for both methods.
Method 1: Disable Background Scrolling with CSS and JavaScript
In this section, I’ll walk you through step-by-step how you can use custom code to disable page scrolling when a popup is visible.
To do that, we will create a dummy webpage that displays a popup and uses CSS and JavaScript to control and disable background scrolling.
Without further ado, let’s get started!
Step 1: Setting Up HTML for the Popup Page
First, let’s set up the basic HTML layout for the page where you will show the popup.
Here’s a simple example of what your HTML file might look like, including a popup/modal that will be triggered by a button click.
Note: I have created a basic product page for WowOptin plugin mentioning its features. You can replace the texts with your preferred information.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WowOptin - The Best Popup Builder for Your Website</title>
<!-- WowOptin: Homepage Styling -->
<link rel="stylesheet" href="backgroundscroll.css">
</head>
<body>
<!-- WowOptin Homepage -->
<div class="homepage">
<h1>WowOptin: The Best Popup Builder for Your Website</h1>
<img src="https://wowoptin.com/wp-content/uploads/Landing-page/All-Features-Page-Assets/builder.png" alt="WowOptin Popup Image" width="700" height="800" class="homepage-image">
<section class="intro">
<h2>Boost Your Conversions with Stunning Popups</h2>
<p>WowOptin is the ultimate no-code popup builder designed to help you grow your email list, increase sales, and enhance user engagement. With a variety of customizable templates and powerful targeting options, you can create popups that drive results without the need for technical expertise.</p>
</section>
<section class="unique-features">
<h2>Why Choose WowOptin?</h2>
<ul>
<li><strong>No-Code Popup Builder:</strong> Create popups in minutes using our intuitive drag-and-drop builder. No coding skills required!</li>
<li><strong>Advanced Targeting:</strong> Use behavior-based triggers such as exit-intent, scroll depth, inactivity, and more to show the right message to the right user at the right time.</li>
<li><strong>Customizable Templates:</strong> Choose from a wide range of fully customizable templates designed for different marketing goals like lead generation, sales, and announcements.</li>
<li><strong>Seamless Integrations:</strong> Integrates with your favorite tools like MailChimp, MailPoet, FluentCRM, and more to ensure smooth data flow.</li>
<li><strong>Smart Scheduling:</strong> Set specific times for popups to appear, and even target users based on their timezone to increase relevance.</li>
<li><strong>Real-Time Analytics:</strong> Track your popups' performance and make data-driven decisions with detailed analytics that show conversion rates, engagement, and more.</li>
</ul>
</section>
<section class="cta">
<h2>Ready to Boost Your Conversion Rate?</h2>
<p>Sign up for WowOptin today and start building high-converting popups without the hassle. Get started now!</p>
<button id="openModal">Get 50% Discount Here!</button>
</section>
</div>
<!-- WowOptin: Discount Popup Modal -->
<div id="popup" class="modal">
<div class="modal-content">
<span id="closeModal" class="close">×</span>
<h2>Get 50% Off WowOptin - Limited Time Offer!</h2>
<p>Unlock all of WowOptin’s powerful features and start creating high-converting popups today! This special 50% discount is only available for a limited time, so don’t miss out!</p>
<br>
<a href="https://wowoptin.com/#pricing" id="buyNow">
Claim Your Discount Now!
</a>
</div>
</div>
<script src="backgroundscroll.js"></script>
</body>
</html>
Step 2: Add the CSS Styles
To achieve the effect of disabling background scrolling, we need to add some CSS that will hide the overflow of the body when the popup modal is visible. Below is the necessary CSS code for the homepage and the modal.
/* WowOptin: Basic Homepage Styling */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #fff;
color: #333;
text-align: center;
}
/* Homepage Layout */
.homepage {
padding: 20px;
}
.homepage h1 {
font-size: 36px;
color: #333;
margin-bottom: 20px;
}
.homepage-image {
max-width: 100%;
height: auto;
border-radius: 8px;
margin-bottom: 20px;
}
/* Intro Section */
.intro {
margin-bottom: 30px;
}
.intro h2 {
font-size: 28px;
color: #555;
}
.intro p {
font-size: 18px;
max-width: 700px;
margin: 0 auto;
color: #666;
}
/* Unique Features */
.unique-features {
margin-bottom: 40px;
}
.unique-features h2 {
font-size: 28px;
color: #444;
}
.unique-features ul {
list-style-type: none;
padding: 0;
}
.unique-features li {
font-size: 18px;
margin: 10px 0;
color: #444;
}
/* Call to Action Section */
.cta {
margin-top: 40px;
}
.cta h2 {
font-size: 32px;
color: #333;
}
.cta p {
font-size: 20px;
margin-bottom: 20px;
}
.cta button {
padding: 15px 30px;
font-size: 18px;
background-color: #ff7a00;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.cta button:hover {
background-color: #ff5c00;
}
/* WowOptin: Disable scrolling when modal is open */
body.noscroll {
overflow: hidden;
}
/* Modal Background (Hidden by Default) */
.modal {
display: none; /* Initially hidden */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
/* Modal Content */
.modal-content {
background: white;
width: 50%;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
/* Close Button */
.close {
font-size: 30px;
font-weight: bold;
cursor: pointer;
position: absolute;
top: 10px;
right: 10px;
}
/* Button Link Style */
#buyNow {
padding: 15px 30px;
font-size: 18px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
text-decoration: none; /* Remove underline */
transition: background-color 0.3s ease;
}
#buyNow:hover {
background-color: #218838;
}Step 3: Add JavaScript to Control the Popup and Scrolling
Now, let’s add the JavaScript logic to display the popup and disable background scrolling. We’ll also ensure that the background scrolling is enabled again when the modal is closed.
// Select elements
const openModal = document.getElementById("openModal");
const closeModal = document.getElementById("closeModal");
const popup = document.getElementById("popup");
// Open popup and disable background scrolling
openModal.addEventListener("click", () => {
popup.style.display = "flex"; // Show modal
document.body.classList.add("noscroll"); // Disable scrolling
});
// Close popup and re-enable background scrolling
closeModal.addEventListener("click", () => {
popup.style.display = "none"; // Hide modal
document.body.classList.remove("noscroll"); // Enable scrolling
});
// Close modal when clicking outside it
window.addEventListener("click", (event) => {
if (event.target === popup) {
popup.style.display = "none";
document.body.classList.remove("noscroll");
}
});Step 4: Testing the Popup and Scrolling Effect
After adding the HTML, CSS, and JavaScript code, you should be able to test the functionality.
When you click the “Get 50% Discount Here!” button, the popup should appear, and background scrolling should be disabled.
Clicking the “X” icon in the popup or anywhere outside the popup should close it and re-enable scrolling.
Here’s what we covered:
- HTML: We created a basic structure for the homepage and the modal popup.
- CSS: Styled the popup and added a rule (overflow: hidden) to disable background scrolling when the modal is active.
- JavaScript: Managed the opening and closing of the popup, while adding/removing the class that disables scrolling.
Method 2: Disable Background Scrolling Using WowOptin Plugin
In this method, I will walk you through how to use the WowOptin, a versatile popup builder plugin to easily disable background scrolling when a popup appears on your site.
Step 1: Install WowOptin
First, install the WowOptin plugin on your WordPress site. You can do this by downloading the plugin from the official WordPress plugin repository or directly from your WordPress dashboard.
Once activated, you’ll have access to its amazing features, including the option to disable background scrolling.
Step 2: Create a New Popup
Now that WowOptin is installed, it’s time to create your popup.
- Navigate to the WowOptin dashboard and click on Add New Optin.
- From here, you can create a new popup by selecting the desired template or starting from scratch.
- Now head over to the Elements tab. This is where you’ll add the key components of your popup, such as headings, text, images, videos, and more. ‘
Simply drag and drop the elements you want to use and customize them as needed.
Step 3: Enable the Prevent Page Scrolling Option
To disable background scrolling when the popup is displayed, you’ll need to select the popup and from the floating setting bar, click the Overlay option.
From the Overlay settings, you will see an option “Prevent Page Scrolling”. Simply enable it and WowOptin will automatically prevent users from scrolling the background content while the popup is active.
Step 4: Customize Further (Optional)
WowOptin offers many advanced features that you can use to enhance your popup.
For example, you can set audience targeting, which allows you to show the popup to specific visitors based on various factors like device, location, or behavior.
You can also use smart triggers, such as exit intent or timed delays, to control when the popup appears.
Resources You May Find Useful
- How to Create A High-Performing Popup
- Show Popup When Users Scroll Down A Page
- Best Budget-friendly Opt-in Plugins
Summing Up
When implementing a popup or modal on a website, it’s often important to prevent the background from scrolling to maintain focus on the modal content.
You can use custom code if you want full control and prefer custom solutions.
On the other hand, a no-code popup builder like WowOptin is perfect for you if you want an easy solution that automatically handles background scrolling and other popup functionalities.
Frequently Asked Questions
How Can I Allow Scrolling Inside The Popup But Not In The Background?
You can enable scrolling inside the modal by applying overflow: auto to the popup container while keeping overflow: hidden on the <body>.
Does Disabling Background Scrolling Work On Mobile Devices?
Yes, but mobile browsers sometimes handle scrolling differently. To ensure smooth behavior, you may need to disable touchmove events using JavaScript.
Can I Disable Background Scrolling Only For Specific Popups?
Yes, if are using CSS & JavaScript, you can target specific popups with unique classes. If using a popup builder plugin, you can toggle the setting per popup.
What If The Background Scrolling Issue Persists After Implementing The Code?
You can check for conflicting CSS styles or JavaScript events from other scripts that may be overriding the overflow: hidden rule.
