Web 2.0 Pop Up Blocker
Remember those annoying pop ups? You don't notice them as much now-a-days as all modern browsers come with a pop-up blocker which disbales them.
These pop ups are basically created by calling window.open() from JavaScript.
Some of the reason why sites do not use them anymore are:
- They can be easily bypasssed with a pop-up blocker
- They are still annoying and as such, provide a bad user experience
Enter Web 2.0 style Pop Ups! These popups do not use window.open(), rather they rely on overlaying divs on top of the page. Something like this:
Now these cannot be easily bypassed by pop up blockers as they are not real "pop-ups". They are still annoying as:
- They block real content
- They require you to find the tiny, obscure, almost hidden "X" or "close" button and click it.
- The "X" or "close" click can be used to launch a real pop-up window or execute other malicious code. The browser will not block it as it is initiated by you.
After being annoyed for a while, I decide to create a bookmarklet to tackle this menace. A bookmarklet is similar to a bookmark, but instead of launching a web page, it executes javascript code.
To use it,
- Create a new bookmark
- In the URL field, copy/paste the code below:
javascript:(function(e,a,g,h,f,c,b,d){if(!(f=e.jQuery)||g>f.fn.jquery||h(f)){c=a.createElement("script");c.type="text/javascript";c.src="http://ajax.googleapis.com/ajax/libs/jquery/"+g+"/jquery.min.js";c.onload=c.onreadystatechange=function(){if(!b&&(!(d=this.readyState)||d=="loaded"||d=="complete")){h((f=e.jQuery).noConflict(1),b=1);f(c).remove()}};a.documentElement.childNodes[0].appendChild(c)}})(window,document,"1.3.2",function($,L){$('div[name*="overlay"]').hide();$('div[id*="overlay"]').hide();$('div[style*="z-index"]').each(function(){if($(this).css("z-index")>1000){$(this).hide()}});$('iframe[style*="z-index"]').each(function(){if($(this).css("z-index")>1000){$(this).hide()}});}); - Click Ok to Save the bookmark
- Drag the button below to your bookmark bar. (Read my update below)
- When you visit a page that uses these overlays, simply click on the bookmark to safely clear them out.
Alternately,
- Visit http://jsfiddle.net/2nQZ7/embedded/result/
- Drag the "Pop Ups Gone" link to your bookmark bar
Standalone version (v1.0): **Update**: I realized that none of the blogging platforms allow you to create a bookmarklet that you can drag onto your bookmarks bar (sigh).
Here's the code that it executes:
$('div[name*="overlay"]').hide(); /* hide any divs with the name 'overlay' in them */
$('div[id*="overlay"]').hide(); /* hide any divs with the id 'overlay' in them */
$('div[style*="z-index"]').each(function(){ /* hide any divs with z-index > 1000 */
if($(this).css("z-index")>1000){$(this).hide()}});
$('iframe[style*="z-index"]').each(function(){ /* hide any iframes with z-index > 1000 */
if($(this).css("z-index")>1000){$(this).hide()}});
It uses jQuery and will try to load jQuery (safely, no conflict mode) if the web page doesn't use it already. Thanks to Ben Alman's nice jQuery bookmarklet generator!
Please send your comments/feedback. If you don't find it working on any site, leave me a comment including the site URL and I'll try to fix it.
