Dev Tools Can Save You!
As a student in the software engineering realm you tend to pick up some hacks along the way… this is one of them.
I’ve been burning the candle at both ends reading articles from around the web lately. Occasionally I’ll find a story and then bam! A wild popup appears and ruins my whole flow. After some due diligence I found a way to make those annoying barriers disappear without having to sign up with your email or worse fill out a survey.
These popups are also known as overlays or lightbox modals and with a little bit of know-how they can be disabled relatively easily. One method would be just to disable JavaScript in your browser, but doing so would limit functionality on other websites.
Fortunately there’s a better way of bypassing these annoying ads thanks to browser tools.
Bypassing the Gatekeepers
The process behind getting around the lightbox modals is fairly simple. You’ll need to access your browser inspector tools. Below I’ll demonstrate using chrome but this process is nearly the same in all browsers.
Step 1 —Use the Inspect Element Tool
By right-clicking on any page you can bring up the inspect element part of the Dev Tools console. After you open it many lines of code may appear on the right hand side of your screen. Don’t Panic.
Try it yourself here: https://www.feedspot.com/infiniterss.php?_src=feed_title&followfeedid=4509584&q=site:https%3A%2F%2Freactjs.org%2Ffeed.xml
Step 2 — Identify the Lightbox Div
In order to delete the lightbox div you can use the selector tool in the top left of the Dev Tools console and then hover that over the lightbox/popup to identify its containing element
Step 3 — Deleting the Pop Up
There are a few ways you can get rid of the popup and this is dependent on how it was created. The simplest way is simply deleting its class by double clicking the element and backspacing. A second method right clicking the element and hiding it.
Step 4 — Re-Instating the Scroll Bar
Some modals will disable scroll. This can be re-enabled by scrolling to the top of the page just below the <body> tag. There may be a line of code that looks like the below.
Simply delete this line of text and hit enter “style = overflow: hidden”
Step 5 — Close Dev Tools and Scroll Away
You can also install popup blockers but there are some limitations that come with it that I’ve listed below.
I hope you use this power for good. Enjoy your new found internet freedom!
Pop up blockers:
The Cons
- 1 — Limits website navigation. While pop-up blockers are built primarily to stop intrusive ads, it also limits your ability to explore
- 2 — Online Shopping becomes problematic
- 3 — Opportunities can be missed