Popup Killer: How to Bypass Website Barriers Without Signing Up or Completing Surveys

How to Bypass Website Barriers Without Signing Up or Completing Surveys

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.

This popup is called a modal, and this one can't be closed without signing up or signing in.

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.

(1) How it looks with JavaScript enabled, (2) And disabled.

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."

Click on image to enlarge.

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.

Click on image to enlarge.

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).

Click on image to enlarge.

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.

Click on image to enlarge.

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.

Click on image to enlarge.

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."

Click on image to enlarge.

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.

[1] Chrome, [2] Firefox, [3] IE, [4] Safari.

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.

14 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, 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

Share Your Thoughts

  • Hot
  • Latest