Last night, I was reading a riveting National Geographic article on the green-eyed tree frog, until I was quickly interrupted by an annoying popup asking me to "create a free account" or "sign in." Really, I'd like to do neither. I just want to read about tree frogs.
You've probably experienced these popup windows, known as Lightbox modals, all across the web, especially on magazine and newspaper sites that have yet to fully embrace the ad-supported digital world. And let's not forget about those pesky "fill out this survey to continue" content blockers (don't even get me started on those).
To disable these Lightbox modal windows, you can just disable JavaScript in your web browser, which prevents them from showing up in the first place. However, that will also kill some of the other functionality of the website.
Fortunately, there's another easy way to bypass these annoying popups without ruining the overall functionality of the website.
Bypassing Lightbox Modals in Chrome, Firefox, & Internet Explorer
In order to bypass these popups, you'll need to access your web inspector and delete some of the webpage's code. Chrome, Firefox, and Internet Explorer make accessing the web inspector very easy. Below, I'm using Chrome, but the process is nearly identical in Firefox and IE.
Step 1: Inspect Element
Simply right-click the faded background of the webpage and select "Inspect Element."
When the inspector opens, you will see several lines of code. Don't worry! You don't have to know what any of this means.
Step 2: Delete the Lightbox Mask
The inspector should automatically highlight the mask layer behind the popup Lightbox modal, in this case, "monetate_lightbox_mask". Make sure that snippet of code is highlighted, the whole <div>, then right-click on the selection and hit "Delete Node" (or "Delete Element" in IE).
Step 3: Delete the Lightbox Window
Now, you need to delete the second <div> tag with the "mandate_lightbox_mask" piece in it that was directly below the one we just deleted above. This will completely remove the popup box obstructing your view.
If you were to quit right here, you'll quickly find out that you can't scroll on the webpage. That's because scrolling functionality was also disabled with the Lightbox modal, so we need to reenable it.
Step 4: Get Your Scroll Bar Back
Just below the <head> tag you will find a <body> tag. Find the "style = overflow: hidden" code on this line and delete only the "overflow: hidden" snippet. Just double-click in that section, delete that text, and hit enter.
After this, you should see your scrollbar again, not to mention it'll actually work, too.
Step 5: Close the Developer Tools
Now just close the developer tools view and read to your heart's content. As you can see, I didn't signup or register and I'm still getting free content, while keeping JavaScript enabled for a more eye-friendly experience.
Bypassing Lightbox Modals in Safari
Safari's process is no different than Chrome and Firefox, other than that you have to enable access to your web developer tools. To turn them on, simply open the "Advanced" tab in Safari's "Preferences," and click on the box at the bottom that says "Show Develop menu in menu bar."
Now that you have enabled the Develop menu, you can do the same exact thing as you can with Chrome and Firefox. Right-click on the masked background, select "Inspect Element," proceed to delete the three things mentioned in Steps 2 through 4 above, and close the tools.
This Process Could Vary from Site to Site
In my example, I used National Geographic's website, but this method of deleting nodes can come in handy for pretty much any other website that uses content-blocking Lightbox modals. However, the <div> tags and terms used will probably vary. So, the best thing to do is use the selection tool.
In Chrome, click on the magnifying glass icon and hover over the webpage to locate the appropriate nodes to delete. In Firefox and Internet Explorer, use the arrow pointing at an element icon. In Safari, it's a crosshairs icon. You can then point at the part of the page that's blocking your view, and click to select the html node (or element) that's blocking your view of the content underneath. Then just delete the node, and you'll be good to go.
Just updated your iPhone? You'll find new emoji, enhanced security, podcast transcripts, Apple Cash virtual numbers, and other useful features. There are even new additions hidden within Safari. Find out what's new and changed on your iPhone with the iOS 17.4 update.
15 Comments
Well, I'm not a computer geek (Unfortunately, because I wanna be one), so I couldn't understand (basically) anything from Step 2-4. I know what 'Inspect Element' is, so I have no problem in understanding Step 1.
Well, these things really annoy me to no end, so, a Kudo and a big 'Thank You Very Much' from me!
Nice, but much easier way by adding URL of ad to the built in host file in windows, no more connections to that ad site in either direction. this method will stop tracking cookies, malware, spyware etc.
Nice tip. As well, you can install the Ad block plugin, click in the box with the right mouse button, and select "hide this ad".
Thanks! But will this work with modal windows like the one featured on the Nat Geo page? It's technically not an ad. I'll have to try it out.
If you want to add more load to your browser then AdBlockPlus is the way to go. I uninstalled all my ad blockers for hosts file. No regrets.
I would agree, but today, many people have high end PCs, which can easily run a browser with some add-ons. Isn't that bad if you measure the benefits.
Just my opinion. I respect yours, of course.
This manual deletion method is good for me, as I rarely come across these lightbox blockers, and I don't like having Ad-blocking plugins. Plus, it's kinda fun to mess with the page's code if you're not a coder. :)
I agree! Usually the boxes give you a way to exit or "sign up later." However, when I come across one that doesn't, this mehtod makes me feel special.
So, here's a tip for you. Open the Dev console on Chrome (ctrl+shit+J) and paste this line:
document.body.contentEditable='true'
And press enter.
Now every text on screen is editable (some may be a little tricky to edit, like buttons, but is possible).
Is a lot of fun mess with your Facebook page, changing your friends posts and messages, and showing them. (Specially changing the names in a "Started Relationship" post.)
Have fun : D
I Digress :-)
I, actually, didn't tried yet. But it should work. The ad blocker can block any HTML element on a page. They have loaded it with many ads samples, but you can choice other elements to hide. The advantage with this method, is that the Ad block will remember your choice, and always hide that banner or modal or whatever, even in other websites that use it. (This can be a con too, so use it carefully).
Thanks! That worked for me
Good!!
thanks for sharing
I did't had the tag of overflow: hidden under the head tag on body tag. But, i know a way. When we open inspect element, hit CTRL+F to open search bar. Then, search overflow: hidden. Wherever you find it, delete that shit. It may be applied to a class name similar to the name '.modal-open {overflow: hidden}'. Wherever you find it, delete that shit.
You'll be just fine.
Share Your Thoughts