What I discovered is that wikipedia just has a simple script to pop up a banner over the regular page which is living right below the banner. It is trivial to remove: just disable javascript on wikipedia or run a script-blocking programming when you view wikipedia. NoScript (http://noscript.net/) should work for Firefox, or NotScripts (https://chrome.google.com/webstore/detail/odjhifogjcknibkahlpidmdajjpkkcfn) for Chrome if you choose to go this route. You could also just block the blackout banner script that I describe below.
If you are interested in the mechanics of this "blackout" banner, read on:
Inspecting the scripts running on the page, I see this one:
http://meta.wikimedia.org/w/index.php?title=Special:BannerLoader&banner=blackout&campaign=English+Wikipedia+Blackout&userlang=en&db=enwiki&sitename=Wikipedia&country=USInside, we get this:
insertBanner({
"bannerName": "blackout",
"bannerHtml": "<style>\n#mw-sopaOverlay {\n \/* Opera Mini doens't like position absolute *\/\n \/* iOS doesn't like position fixed *\/\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 500;\n color: #dedede;\n background: black url(\/\/upload.wikimedia.org\/wikipedia\/commons\/9\/98\/WP_SOPA_Splash_Full.jpg) no-repeat 0 0;\n overflow: auto;\n font-family:Times New Roman;\n}\n\n\/* Monobook requires position, otherwise background is white+book instead of black *\/\nbody.skin-monobook #mw-sopaOverlay {\n position: absolute;\n}\n\n#mw-sopaColumn {\n position: absolute;\n top: 80px;\n left: 420px;\n width: 400px;\n color: #dedede;\n padding-bottom: 30px;\n}\n#mw-sopaHeadline {\n font-size: 1.7em;\n margin-bottom: 0.5em;\n color: #fff;\n overflow: hidden;\n text-align: justify;\n}\n#mw-sopaText { \n margin-bottom: 1.5em;\n text-align: justify;\n}\n#mw-sopaColumn a {\n color: #eee;\n text-decoration: underline;\n}\n#mw-sopaColumn a:hover {\n color: #fff;\n cursor: pointer;\n text-decoration: underline;\n}\n#mw-sopaColumn a.action {\n margin-top: 2px;\n}\n.mw-sopaActionDiv {\n margin-left: 1em;\n margin-bottom: 1em;\n}\n\n.mw-sopaActionHead {\n font-weight: bold;\n}\n.mw-sopaSocial {\n float: left;\n text-align: center;\n margin-right: 12px;\n margin-bottom: 3px;\n font-size: small;\n}\n.mw-sopaSocial a {\n text-decoration: none;\n}\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\n( function ($) {\n\t\/\/ n.b. community has decided for full blackout including Special pages,\n\t\/\/ but it is hard to do stuff in the meantime without this.\n\tvar namespaceWhitelist = ['Special'];\n\n\t\/\/ see Wikipedia:SOPA_initiative\/Blackout_screen_testing\n\tvar pageWhitelist = [\n'Stop Online Piracy Act',\n'PROTECT IP Act',\n'Online Protection and Enforcement of Digital Trade Act',\n'Censorship',\n'Special:CongressLookup',\n'Special:NoticeTemplate',\n'Special:NoticeTemplate\/view',\n'Wikipedia:Text of Creative Commons Attribution-ShareAlike 3.0 Unported License',\n'Wikipedia:General disclaimer',\n'Wikipedia:Contact us',\n'Wikipedia:About',\n'Wikipedia:Copyright violations',\n'Wikipedia:Copyrights',\n'Wikipedia:Five pillars',\n'Digital Millennium Copyright Act',\n'DNS cache poisoning',\n'Censorship',\n'Wikipedia:SOPA initiative',\n'Wikipedia:SOPA initiative\/Action',\n'Wikipedia:SOPA initiative\/Actions by other communities',\n'Wikipedia:SOPA initiative\/Media',\n'Wikipedia:SOPA initiative\/Learn more',\n'Wikipedia:SOPA initiative\/Legal overview',\n'Wikipedia:SOPA initiative\/Take action',\n'SOPA',\n'PIPA',\n'OPEN',\n'Censorship',\n'Special:CongressLookup'\n\t];\n\tvar geoHasUsRep = [\n\t\t'US', \/\/ USA\n\t\t'PR', \/\/ Puerto Rico\n\t\t'VI', \/\/ Virgin Islands\n\t\t'MP', \/\/ Northern Mariana Islands\n\t\t'AS', \/\/ American Samoa\n\t\t'GU' \/\/ Guam\n\t];\n\tvar preload = [];\n\tvar i;\n\n\t\/\/ Exclude some namespaces\n\tif ( $.inArray( wgCanonicalNamespace, namespaceWhitelist ) !== -1 ) {\n\t\treturn;\n\t}\n\n\t\/\/ Exclude some individual pages\n\tfor ( i = 0; i < pageWhitelist.length; i++ ) {\n\t\tif ( pageWhitelist[i] === wgPageName || pageWhitelist[i] === wgPageName.replace( \/_\/g, ' ' ) ) {\n\t\t\treturn;\n\t\t}\n\t}\n\n var urlParams = {};\n (function () {\n var e,\n a = \/\\+\/g, \n r = \/([^&=]+)=?([^&]*)\/g,\n d = function (s) { return decodeURIComponent(s.replace(a, \" \")); },\n q = window.location.search.substring(1);\n\n while (e = r.exec(q)) {\n urlParams[d(e[1])] = d(e[2]);\n }\n })();\n\n var country = 'ZZ';\n if ( urlParams.country ) {\n country = urlParams.country;\n } else if ( window.Geo && window.Geo.country ) {\n country = window.Geo.country;\n }\n \n\tvar hasUsRep = false;\n for ( i = 0; i < geoHasUsRep.length; i++ ) {\n\t\tif ( geoHasUsRep[i] === country ) {\n\t\t hasUsRep = true;\n\t\t break;\n\t\t}\n\t}\n\n\tvar overlay = $('<div id=\"mw-sopaOverlay\"><\/div>');\n\tvar column = $('<div id=\"mw-sopaColumn\"><\/div>');\n\tvar headline = $('<div id=\"mw-sopaHeadline\">Imagine a World<br \/>Without Free Knowledge<\/div>');\n\tvar intro = $('<div id=\"mw-sopaText\"><p>For over a decade, we have spent millions of hours building the largest encyclopedia in human history. Right now, the U.S. Congress is considering legislation that could fatally damage the free and open internet. For 24 hours, to raise awareness, we are blacking out Wikipedia. <a href=\"http:\/\/en.wikipedia.org\/wiki\/Wikipedia:SOPA_initiative\/Learn_more\" target=\"_blank\">Learn more.<\/a><\/p><\/div>');\n\tvar validateZip = function(zip) {\n\t\treturn \/^\\s*[0-9]{5}([- ]?[0-9]{4})?\\s*$\/.test(zip);\n\t};\n\n\tvar action = $('<div id=\"mw-sopaAction\"><\/div>');\n\tif ( hasUsRep ) {\n\t\taction.append( $('<p class=\"mw-sopaActionHead\">Contact your representatives.<\/p><div class=\"mw-sopaActionDiv\"><form action=\"\/wiki\/Special:CongressLookup\" action=\"GET\"><label for=\"zip\">Your zip code:<\/label> <input name=\"zip\" type=\"text\" size=\"5\"> <input id=\"sopa-zipform-submit\" type=\"submit\" value=\"Look up\"><\/form><\/div>' ) );\n\n\t\t\/*\n\t\taction.find('#sopa-zipform-submit').click(\n\t\t\tfunction(e) {\n\t\t\t\tvar enteredZip = action.find('input[name=\"zip\"]').val();\n\t\t\t\tif ( ! validateZip( enteredZip ) ) {\n\t\t\t\t\talert( 'You've entered an invalid zip code.');\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\taction.find('input[name=\"zip\"]').focus();\n\t\t\t\t}\n\t\t\t} );\n\t\t*\/\n\n\t} else {\n var $socialDiv = $('<div>');\n \n \n var socialSites = [\n {\n url: 'https:\/\/www.facebook.com\/sharer.php?u=' + encodeURIComponent( 'http:\/\/tinyurl.com\/7vq4o8g' ),\n title: 'Facebook',\n hi: '\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b9\/WP_SOPA_sm_icon_facebook_ffffff.png',\n icon: '\/\/upload.wikimedia.org\/wikipedia\/commons\/2\/2a\/WP_SOPA_sm_icon_facebook_dedede.png',\n 'popup': false\n },\n {\n url: 'https:\/\/m.google.com\/app\/plus\/x\/?v=compose&content=' + encodeURIComponent( 'I support the January 18th Wikipedia blackout to protest SOPA and PIPA. Show your support here http:\/\/tinyurl.com\/7vq4o8g' ),\n title: 'Google+',\n hi: '\/\/upload.wikimedia.org\/wikipedia\/commons\/a\/a1\/WP_SOPA_sm_icon_gplus_ffffff.png',\n icon: '\/\/upload.wikimedia.org\/wikipedia\/commons\/0\/08\/WP_SOPA_sm_icon_gplus_dedede.png',\n 'popup': true\n },\n {\n url: 'https:\/\/twitter.com\/intent\/tweet?original_referer=' + encodeURIComponent( window.location ) + '&text=' + encodeURIComponent( 'I support #wikipediablackout! Show your support here http:\/\/tinyurl.com\/7vq4o8g' ),\n title: 'Twitter',\n hi: '\/\/upload.wikimedia.org\/wikipedia\/commons\/8\/8a\/WP_SOPA_sm_icon_twitter_ffffff.png',\n icon: '\/\/upload.wikimedia.org\/wikipedia\/commons\/4\/45\/WP_SOPA_sm_icon_twitter_dedede.png',\n 'popup': false\n }\n ];\n\n for ( i = 0; i < socialSites.length; i++ ) {\n ( function ( site ) {\n function linkify( $item ) {\n var $link = $( '<a><\/a>' )\n .css( 'text-decoration', 'none' )\n .attr( 'href', site.url )\n .append( $item );\n var target = 'wpblackout_' + site.title + '_share';\n if ( site.popup ) {\n $link.click( function() {\n window.open(\n site.url,\n target,\n 'resizable=yes,width=500,height=300,left=' + (screen.availWidth\/2-250) + ',top=' + (screen.availHeight\/2-150)\n );\n return false;\n } );\n } else {\n $link.attr( 'target', target );\n }\n return $link;\n }\n var $icon = $( '<img><\/img>' ).attr( { 'width': 33, 'height': 33, 'src': site.icon } );\n var $iconLink = linkify( $icon );\n preload.push( site.hi );\n var $wordLink = linkify( site.title );\n var $div = $( '<div class=\"mw-sopaSocial\"><\/div>' );\n $div.hover(\n function() {\n $icon.attr( 'src', site.hi );\n $wordLink.css( 'color', '#fff' );\n },\n function() {\n $icon.attr( 'src', site.icon );\n $wordLink.css( 'color', '#dedede' );\n });\n $div.append( $iconLink, $('<br>'), $wordLink );\n $socialDiv.append($div);\n } )( socialSites[i] );\n }\n action.append(\n $( '<p class=\"mw-sopaActionHead\">Make your voice heard<\/p>' ),\n $( '<div class=\"mw-sopaActionDiv\"><\/div>' ).append(\n $socialDiv,\n $( '<div style=\"clear: both;\"><\/div>' )\n )\n );\n\n\t}\n\n\tcolumn.append( headline, intro, action );\n\toverlay.append( column );\n\n\t$('body').children().hide();\n\t$('body').append(overlay);\n\t$('<style id=\"mw-sopa-blackout\">#mw-page-base, #mw-head-base, #content, #mw-head, #mw-panel, #footer { display: none; }<\/style>').appendTo('head');\n\n\tvar preloaded = [];\n\tfor ( i = 0; i < preload.length; i++ ) {\n\t\tpreloaded[i] = new Image();\n\t\tpreloaded[i].src = preload[i];\n\t}\n\n} )(jQuery);\n<\/script>",
"campaign": "English Wikipedia Blackout",
"fundraising": "0",
"autolink": "0",
"landingPages": ""
});
Notice that the third line contains the HTML for the entire blackout banner. The above code is calling a function called insertBanner which is defined here:
http://en.wikipedia.org/w/index.php?title=Special:BannerController&cache=/cn.js&303-4
It contains the following:
function insertBanner( bannerJson ) {
jQuery( 'div#centralNotice' ).prepend( bannerJson.bannerHtml );
if ( bannerJson.autolink ) {
var url = 'https://wikimediafoundation.org/wiki/Special:LandingCheck';
if ( ( bannerJson.landingPages !== null ) && bannerJson.landingPages.length ) {
targets = String( bannerJson.landingPages ).split(',');
url += "?" + jQuery.param( {
'landing_page': targets[Math.floor( Math.random() * targets.length )].replace( /^\s+|\s+$/, '' )
} );
url += "&" + jQuery.param( {
'utm_medium': 'sitenotice', 'utm_campaign': bannerJson.campaign,
'utm_source': bannerJson.bannerName, 'language': wgUserLanguage,
'country': Geo.country
} );
jQuery( '#cn-landingpage-link' ).attr( 'href', url );
}
}
}
function hideBanner() {
jQuery( '#centralNotice' ).hide(); // Hide current banner
var bannerType = $.centralNotice.data.bannerType;
if ( bannerType === undefined ) bannerType = 'default';
setBannerHidingCookie( bannerType ); // Hide future banners of the same type
}
function setBannerHidingCookie( bannerType ) {
var e = new Date();
e.setTime( e.getTime() + (14*24*60*60*1000) ); // two weeks
var work='centralnotice_'+bannerType+'=hide; expires=' + e.toGMTString() + '; path=/';
document.cookie = work;
}
// This function is deprecated
function toggleNotice() {
hideBanner();
}
var wgNoticeToggleState = (document.cookie.indexOf('hidesnmessage=1')==-1);
( function( $ ) {
$.ajaxSetup({ cache: true });
$.centralNotice = {
'data': {
'getVars': {},
'bannerType': 'default'
},
'fn': {
'loadBanner': function( bannerName, campaign, bannerType ) {
// Store the bannerType in case we need to set a banner hiding cookie later
$.centralNotice.data.bannerType = bannerType;
// Get the requested banner
var bannerPageQuery = $.param( {
'banner': bannerName, 'campaign': campaign, 'userlang': wgUserLanguage,
'db': wgDBname, 'sitename': wgSiteName, 'country': Geo.country
} );
var bannerPage = '?title=Special:BannerLoader&' + bannerPageQuery;
var bannerScript = '<script type="text/javascript" src="//meta.wikimedia.org/w/index.php' + bannerPage + '"&rt;</script&rt;';
if ( document.cookie.indexOf( 'centralnotice_'+bannerType+'=hide' ) == -1 ) {
jQuery( '#siteNotice' ).prepend( '<div id="centralNotice" class="' +
( wgNoticeToggleState ? 'expanded' : 'collapsed' ) +
' cn-' + bannerType + '"&rt;'+bannerScript+'</div&rt;' );
}
},
'loadBannerList': function( geoOverride ) {
if ( geoOverride ) {
var geoLocation = geoOverride; // override the geo info
} else {
var geoLocation = Geo.country; // pull the geo info
}
var bannerListQuery = $.param( { 'language': wgContentLanguage, 'project': wgNoticeProject, 'country': geoLocation } );
var bannerListURL = wgScript + '?title=' + encodeURIComponent('Special:BannerListLoader') + '&cache=/cn.js&' + bannerListQuery;
var request = $.ajax( {
url: bannerListURL,
dataType: 'json',
success: $.centralNotice.fn.chooseBanner
} );
},
'chooseBanner': function( bannerList ) {
// Convert the json object to a true array
bannerList = Array.prototype.slice.call( bannerList );
// Make sure there are some banners to choose from
if ( bannerList.length == 0 ) return false;
var groomedBannerList = [];
for( var i = 0; i < bannerList.length; i++ ) {
// Only include this banner if it's intended for the current user
if( ( wgUserName && bannerList[i].display_account ) ||
( !wgUserName && bannerList[i].display_anon == 1 ) )
{
// add the banner to our list once per weight
for( var j=0; j < bannerList[i].weight; j++ ) {
groomedBannerList.push( bannerList[i] );
}
}
}
// Return if there's nothing left after the grooming
if( groomedBannerList.length == 0 ) return false;
// Choose a random key
var pointer = Math.floor( Math.random() * groomedBannerList.length );
// Load a random banner from our groomed list
$.centralNotice.fn.loadBanner(
groomedBannerList[pointer].name,
groomedBannerList[pointer].campaign,
( groomedBannerList[pointer].fundraising ? 'fundraising' : 'default' )
);
},
'getQueryStringVariables': function() {
document.location.search.replace( /\??(?:([^=]+)=([^&]*)&?)/g, function () {
function decode( s ) {
return decodeURIComponent( s.split( "+" ).join( " " ) );
}
$.centralNotice.data.getVars[decode( arguments[1] )] = decode( arguments[2] );
} );
}
}
}
jQuery( document ).ready( function ( $ ) {
// Initialize the query string vars
$.centralNotice.fn.getQueryStringVariables();
if( $.centralNotice.data.getVars['banner'] ) {
// if we're forcing one banner
$.centralNotice.fn.loadBanner( $.centralNotice.data.getVars['banner'] );
} else {
// Look for banners ready to go NOW
$.centralNotice.fn.loadBannerList( $.centralNotice.data.getVars['country'] );
}
} ); //document ready
} )( jQuery );
Basically, all Wikipedia is doing is having the first script call the second script's banner insertion function, passing the special blackout banner as a parameter. I assume that Wikipedia wants this to be relatively easy to get around considering that if your browser allows you to type javascript into the address bar, you can type in a few lines of javascript to get around the effects of this blackout banner.
UPDATE: As I had anticipated, there is a ton of javascript floating around that you can type into your address bar to remove the blackout banner. Here is one example that I found:
javascript:jQuery("#mw-sopaOverlay").css("display", "none !important");jQuery("#content, #mw-page-base, #mw-head-base, #mw-head, #mw-panel, #footer").css("display", "block !important");
All that it does is tell the Wikipedia page to hide the blackout banner section of the HTML and to show the rest of the HTML (which is usually displayed).