bookmarklet to overlay css layer?

I've been searching for how to write a bookmarklet which overlays the full screen with a layer filled with a color. Ie. Click the bookmarklet and a layer sits on top of the content.

The other trick I.am trying to solve is to.have a 'hole'开发者_开发技巧 aka a transparent part of the layer, eg 200px square in the middle of the overlay layer where you can see through to the original web page content underneath.

Are there any css wizards out there who could help me? Much appreciated... I'm a bit of a css newbie.

Cheers and thanks!!

I've been searching for how to write a bookmarklet which overlays the full screen with a layer filled with a color. Ie. Click the bookmarklet and a layer sits on top of the content.

How about this? The following works for me:

javascript:(function(a){a=document.createElement('div');a.style.position=
'fixed';a.style.left=a.style.right=a.style.top=a.style.bottom='0%';
a.style.zIndex='100000';a.style.background='white';a.innerHTML=
'overlay content goes here';document.body.appendChild(a);})();

I'm not sure about the hole though; sorry. You may have to create separate elements that form the shape, but that of course is an ugly solution.

Here is an example that only uses CSS

http://jsfiddle.net/QZV4D/

you can modify the hole by adjusting the % of the left and right overlays