Content locker

Content Locker
So to get it working, you need to copy and paste this javascript into the header of your page.

Code:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

	var Delay = 10;//Seconds after them clicking the link, the gateway vanishes.

	function setupgateway()
	{
		var Left = $(window).width() /2;
		Left = Left - $('#gatewaydiv').width()/2;

		var Top = $(window).height() /2;
		Top = Top - $('#gatewaydiv').height()/2;

		$('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
		$('#gatewayDimmer').width($('html').width());
		$('#gatewayDimmer').height($('html').height());
		$('#gatewayDimmer').css('display','block');
	}

	function removegateway()
	{
		$('#gatewaydiv').css('display', 'none');
		$('#gatewayDimmer').css('display','none');
	}

	$(document).ready(function()
	{
		$('.offerlink').click(function()
		{
			setTimeout('removegateway()', Delay*1000);
		});

		setupgateway();
	});
</script>

The only options you need to worry about in there are right at the top. The "Delay". You can set this to however many seconds you want the gateway to come down, AFTER they have clicked one of the offers.

Here are the styles used. Copy and paste these into the head of your page aswell.

Code:

<style>

	body
	{
		background-image:url('http://i41.tinypic.com/29zvocy.jpg');
		background-repeat:repeat;
		height:100%;
		margin:0;
	}

	#mainContent
	{
		background-color:white;
		margin-left:auto;
		margin-right:auto;
		margin-top:30px;
		width:700px;
		border:3px solid #CDCDCD;
		text-align:center;
	}

	#gatewaydiv
	{
		background-image:url("http://i41.tinypic.com/2znsvti.png");
		background-repeat:no-repeat;
		width:500px;
		height:300px;
		padding:20px;
		position:absolute;
		display:none;
		background-color:#FFFFFF;
		border:solid 4px gray;
		text-align:center;
		font-family:arial;
	}

	#gatewaydiv h1
	{
		font-size:35px;
		color:#cc0000;
	}

	#gatewayMessage
	{
		font-size:18px;
	}

	.offerlink
	{
		color:red;
		font-weight:bold;
	}

	#OfferList
	{
		margin:0;
		padding:0;
	}

	#OfferList
	{
		list-style:none;
	}

	#gatewayDimmer
	{
		background-color:#000000;
		opacity:0.8;
		display:none;
		position:absolute;
		top:0;
	}


</style>

Some of this isn't needed, but rather than clean it up I will leave it to you guys. There is no danger though in just using this stock.

Finally you will need to post this into the body of your page. I could do it via javascript, but I think it makes it far more readable and easier to edit when it is just in plain HTML form. I recommend posting it just after the <body> tag, but you can place it anywhere in there.

Code:

<div id="gatewayDimmer">
</div>

<div id="gatewaydiv">
	<ul id="OfferList">
	<h1>Do an offer or DAI!</h1>
	<span id="gatewayMessage">If you wish to see your friends alive. You will fill out an offer right now!</span>
	<br /><br />
	<li><a href="http://www.wachahost.com" class="offerlink" target="blank">Cheap Web Hosting</a></li>
	<li><a href="http://fgfgfg.com/x/0/1076/3696/" class="offerlink" target="blank">Free Apple Ipad</a></li>
	<li><a href="http://www.google.com" class="offerlink" target="blank">Google</a></li>
	</ul>
	<br /><br />
	After completing an offer. Please wait up to a minute for it to register.<br />
	Thank you!
</div>

Obviously edit as you see fit. You can change the URL's and the message, well really anything in the HTML. It should all be pretty easy to change, just check where it it is in the source.