Design & Customization

How To Stop Background Scrolling When Popup Is Open

When you open a popup or modal on a website, you might notice that you can still scroll the background content. This happens because popups often use a fixed position, allowing the user to scroll the main body of the website.

But with Poper, you can easily customize this and stop that background scrolling. Here's how I handle it:

1. Create Your Poper Account

Create Poper Account

First things first, you'll need to sign up for a Poper account. This is where you can create all sorts of popups and connect them to your website. It’s super easy and you'll be up and running in no time!

2. Add Your Domain and Create a New Popup

Add Domain In Poper

Once you have your account set up, you need to add your website's domain. This lets Poper know where you'll be using your popups. After that, let’s get started by creating a new popup. You can customize its look, content, and behavior.

3. Customize Your Popup and Publish It

Customize Your Popup

After you've designed your popup, it's time to publish it! Poper will give you a code snippet that you need to add to your website. This makes sure your popup appears when you need it to.

4. Check if Your Popup is Visible on Your Website

Check the popup preview

Now, go to your website and make sure that the popup you created is visible. If it shows up, great! You've successfully connected it to your site.

5. Add Custom CSS to Stop Background Scrolling

Add css on How To Stop Background Scrolling When Popup Is Open

Here’s the magic part. To stop the background from scrolling when your Poper popup is open, you will need to add a little bit of custom CSS to your website. Paste the following CSS into your website's style sheet:

body[class*="poper-open-"] {
    overflow: hidden;
}

This CSS code targets the body of your website when a Poper popup is active, and it sets the overflow to hidden. This stops the main body from scrolling and keeps the focus on the popup.

And that's it! With this simple CSS snippet, your website's background will no longer scroll when a popup created with Poper is open. This will give your users a smoother and more focused experience.

I hope this guide was helpful! If you have any questions, feel free to ask. Happy converting!

© 2024 Poper (Latracal). All rights reserved.

Grigora Made with Grigora